HTML 里 <b> 和 <strong> 长得一样，为什么还要分两种？

打开代码编辑器，你是不是也常犯这种迷糊：想让一段文字加粗，顺手就敲了个 <b> 标签。渲染出来没啥问题，可仔细翻看文档，发现标准里明明还有 <strong>。这两个东西在浏览器默认样式下，看起来简直就是双胞胎——都是黑体加粗。既然视觉效果没差，为什么标准还非要留着两个标签？

很多人觉得这是 HTML 的冗余，其实不然。这背后藏着的不是样式的分歧，而是语义化的本质差异。简单说，<b> 管的是“长什么样”，<strong> 管的是“意味着什么”。

视觉样式 vs. 逻辑权重

<b> 标签的历史比你想的要久远，它的初衷仅仅是为了在不改变文本逻辑的情况下，提供视觉上的偏移。比如你在介绍一个产品型号，或者文章中需要提及几个特定的专有名词，想让它们从段落里跳脱出来一眼看到，但这段话的逻辑重心并不全在它身上。这时候用 <b> 是最合适的。它告诉浏览器：“嘿，把这儿弄粗点”，除此之外别无他意。

而 <strong> 则完全不同。它代表强烈的重要性或紧迫性。当你处理错误提示、系统警告，或者是引导用户做出关键决策的文字（比如“立即删除”、“确认支付”）时，必须用 <strong>。因为它不仅仅改变了字形，更是在传达一种逻辑上的权重。

别让屏幕阅读器“读不懂”

这层区别对残障人群尤为关键。现代网页越来越重视无障碍访问（Accessibility）。当视障用户开启屏幕阅读器浏览网页时，遇到 <strong> 标签，阅读器往往会通过加重语调、稍微停顿等方式来提示用户：“注意，这段很重要”。

相反，如果全是 <b>，阅读器通常只会按正常语速念过去，顶多读出字体加粗的提示，很难体现出内容的优先级。把警告信息误用 <b> 包裹，相当于在嘈杂的环境里轻声细语地求救，很容易被忽视。 因此，为了包容性和用户体验，涉及关键操作反馈的内容，请务必坚持使用语义更强的 <strong>。

SEO 与爬虫的理解成本

说到搜索引擎优化（SEO），虽然现在的算法极其复杂，不会单纯因为用了某个标签就大幅提权，但合理的语义结构依然有助于爬虫理解页面核心内容。搜索机器人不像人眼那么直观，它们依赖代码结构来判断哪里是重点。

如果你在描述商品特性时，用 <strong> 标注了核心卖点关键词，理论上比无差别的 <b> 更能向搜索引擎传递“这是重点信息”的信号。当然，别滥用，满篇都加 strong 等于没有重点，反而会被判定为关键词堆砌。精准的语义标记，才是对爬虫友好的姿势。

样式控制权分离

还有一个容易被忽视的技术细节。很多时候，我们会觉得“我可以直接用 CSS 控制粗体啊”，没错，font-weight 完全可以接管视觉表现。但这恰恰说明了为什么要区分标签本身。

保持标签的纯净，将内容与样式剥离，是前端开发的黄金法则。假设未来设计改版，决定不再显示某些非核心关键词的加粗效果，用 CSS 去掉 .keyword { font-weight: normal } 即可；但如果当初为了加粗乱用了 <strong>，修改时还得去挑哪些该留、哪些该删，因为它们的底层含义不同。写好标签，是为了未来改样式更轻松。

到底该怎么选？

以后遇到这种选择困难症，不用死记硬背，按这个思路过一遍就行：

• 是否涉及逻辑重要性？ 如果答案是肯定的，比如警示、关键结论，坚决用 <strong>。
• 仅是视觉区分或专有名词？ 如果只是想让几个词显眼点，或者强调品牌名，直接用 <b>。
• 能否用 CSS 解决？ 如果能用类名控制样式，且不想承担语义负担，优先考虑CSS class。

写代码不只是让页面跑通，更是为了让机器和人都能准确解读你的意图。HTML5 时代，语义化不再是锦上添花，而是基本功。下次再敲代码时，别只顾着看预览图漂不漂亮，多花一秒想想“这句话到底重不重要”，这个小习惯积累下来，就是你专业度的最好体现。