在 HTML 中，让文字“加粗”似乎是一件再简单不过的事情。很多初学者会随手写下 ＜b＞文字＜/b＞ 或者 ＜strong＞文字＜/strong＞，并认为它们只是同一个效果的不同写法。然而，现代 Web 开发越来越强调 语义——即标签本身应该传达“这是什么”，而不仅仅是“这长什么样”。

＜b＞ 与 ＜strong＞ 就像一对外表相似但性格迥异的“孪生兄弟”。它们默认都显示为粗体，但在背后的含义、对屏幕阅读器的影响、搜索引擎的理解等方面存在着本质差异。正确使用它们，不仅能提升网页的可维护性，还能让残障用户更好地理解你的内容，甚至帮助搜索引擎更准确地抓取重点。

本文将带你一步步厘清这对标签的来龙去脉，并通过大量实例让你在未来的项目中做出更专业的选择。

一、核心区别一览表

二、语义含义的本质差异

2.1 ＜b＞ 元素：视觉上的“粗体”，语义上的“中性”

• 全称：Bold（粗体）。

• 本质：属于物理标签（physical markup），早期 HTML 中只负责描述外观。

• HTML5 重新定义：为了避免完全废弃 ＜b＞，HTML5 给了它一个新的、较弱的语义——“用于吸引注意但不代表更重要或更紧急的文本”。例如：文档摘要中的关键词、产品名称、评论中的用户名等。

• 关键点：＜b＞ 不表达任何逻辑上的重要性、严肃性或紧迫性。它只是告诉浏览器“这里请加粗”。

2.2 ＜strong＞元素：语义上的“强调重要性”

• 全称：Strong（强烈）。

• 本质：属于 逻辑标签（logical markup），描述内容的含义而非外观。

• HTML5 明确语义：表示内容在上下文中的 重要性（importance）、严肃性（seriousness）或 紧迫性（urgency）。例如：警告信息、法律条款中的关键点、操作指南中的注意事项。

• 嵌套使用：＜strong＞ 可以嵌套，嵌套层级表示重要性递增。例如＜strong＞＜strong＞极度危险＜/strong＞＜/strong＞会比单层 ＜strong＞极度危险＜/strong＞表达更强的重要性（尽管屏幕阅读器的处理方式可能不同，但语义上是清晰的）。

与 ＜em＞ 的区别

• ＜em＞（emphasis）表示语气上的强调（比如重读某个词），通常默认显示为斜体。

• ＜strong＞ 表示 内容本身的重要性，而不是朗读时的语气。两者可以结合使用＜strong＞＜em＞务必＜/em＞在截止前提交＜/strong＞。

三、视觉表现与 CSS 覆盖

• 在现代浏览器（Chrome、Firefox、Safari、Edge）中，两者默认渲染的粗体程度几乎完全一致。极少数旧版浏览器可能会让 ＜strong＞ 略重，但这已不是需要考虑的问题。

• 最佳实践：如果你只需要 纯视觉效果（比如让一段普通文字加粗，但不表达任何重要性），更推荐使用 CSS 的 font-weight: bold，并配合有意义的类名。这样可以保持 HTML 的语义纯粹，将样式与结构分离。

/* 推荐：用 CSS 控制纯视觉粗体 */.visually-bold {  font-weight: bold;}

＜span class="visually-bold"＞我只是看起来粗一点，没什么特别含义＜/span＞

四、可访问性（Accessibility）— 最关键区别

这是 ＜b＞ 与 ＜strong＞ 差异最显著的地方，直接影响视障用户对网页内容的理解。

屏幕阅读器的行为

• 遇到 ＜b＞：主流屏幕阅读器（如 NVDA、JAWS、VoiceOver）会像朗读普通文本一样朗读，没有任何语调、音量、语速的变化。用户无法感知这段文字有什么特殊之处。

• 遇到 ＜strong＞：屏幕阅读器通常会改变朗读方式，例如：

• 提高音量。

• 加重语气。

• 放慢语速。

• 在某些设置下，会提前提示“强调”。

实际影响举例

＜p＞＜b＞警告：＜/b＞ 高压危险，请勿靠近。＜/p＞＜p＞＜strong＞警告：＜/strong＞ 高压危险，请勿靠近。＜/p＞

• 第一段（＜b＞）：屏幕阅读器平淡地读出“警告：高压危险，请勿靠近”，用户可能忽略其严重性。

• 第二段（＜strong＞）：屏幕阅读器以更严肃、更响亮的语调读出“警告：高压危险，请勿靠近”，用户立刻意识到这是重要警示。

可访问性建议

任何需要向用户传达重要性、紧迫性、警告性的内容，必须使用 ＜strong＞，而不是 ＜b＞或单纯的 CSS 粗体。

五、SEO 影响：搜索引擎如何看待它们？

虽然搜索引擎的算法是黑箱，但基于 Google 的官方指南和大量 SEO 实践，可以总结出以下共识：

• 在真正重要的关键词或短语上适度使用 ＜strong＞（例如 1~3 次/段落，不超过内容总量的 5%）。

• 错误做法：为了 SEO 而滥用 ＜strong＞，比如把整个段落甚至整页文字都加粗。这会被搜索引擎视为关键词堆砌（keyword stuffing），反而可能导致排名下降。

记住：SEO 的本质是提供优质的用户体验。合理使用 ＜strong＞ 让内容重点更清晰，本身就是在优化用户体验。

六、典型使用场景对比

6.1 适合 ＜b＞ 的场景（纯视觉吸引，无重要性）

• 文档摘要中的几个词（仅为了视觉突出）。

• 产品名称、品牌名（如“iPhone 15”）。

• 评论中的用户名（“神无 说：...”）。

• 导航菜单中当前激活的项。

• 标题中的装饰性粗体。

＜p＞＜b＞摘要：＜/b＞ 本文讨论了语义 HTML 的重要性。＜/p＞＜p＞推荐产品：＜b＞超薄便携充电宝＜/b＞，限时五折。＜/p＞

注意：上例中“摘要：”只是视觉上区别于正文，并不表示它比后面的文字更重要，使用 ＜b＞ 是合理的。

6.2 适合 ＜strong＞ 的场景（表达重要性或紧迫性）

• 警告、错误提示、法律声明中的关键信息。

• 操作步骤中的核心注意事项。

• 表示强烈否定或肯定的词语（如“ 不要 点击可疑链接”）。

• 重要日期或截止时间。

• 结论性语句中的关键点。

＜p＞＜strong＞最后期限：＜/strong＞ 请在 2026 年 4 月 15 日前提交申请，逾期不候。＜/p＞＜p＞＜strong＞注意：＜/strong＞ 请勿在雷雨天气使用本设备。＜/p＞

6.3 混合使用与进阶示例

＜!-- 同时使用 ＜strong＞ 和 ＜em＞ 表达不同层次的强调 --＞＜p＞  ＜strong＞重要提示：＜/strong＞  在开始之前，请 ＜em＞务必＜/em＞ 阅读 ＜strong＞安全手册第 3 章＜/strong＞。＜/p＞

＜!-- 嵌套 ＜strong＞ 表达递进重要性（HTML5 允许） --＞＜p＞  ＜strong＞    警告：请勿触摸高压区域。    ＜strong＞违反此规定可能导致严重伤害。＜/strong＞  ＜/strong＞＜/p＞

七、历史演变：为什么会有两个相似的标签？

• ＜b＞ 的诞生：早在 HTML 2.0（1995 年），Web 刚兴起时，HTML 主要负责描述文档结构，同时也包含了一些“物理样式”标签，如 ＜b＞（粗体）、＜i＞（斜体）。那时样式与结构尚未分离。

• ＜strong＞ 的引入：随着 Web 标准化推进，HTML 4.0（1997 年）引入了更多“语义”标签，如 ＜strong＞（重要性）和 ＜em＞（强调）。目的是让标签表达 含义 而非 外观 ，以便不同设备（屏幕阅读器、手机、打印机）根据语义来渲染。

• HTML5 的重新定义：在 HTML5 中，＜b＞ 并没有被废弃，而是被重新定义为一个“无额外重要性”的语义标签——用于吸引注意但不代表更重要的文本。这给了 ＜b＞ 一个新的、合理的定位。

八、最佳实践与常见误区

推荐做法

1. 语义优先：每次想加粗文字时，先问自己：

• 这段文字是否表达了 重要性、严重性或紧迫性？

• 是 → 使用 ＜strong＞  。

• 否 → 考虑是否真的需要加粗？如果需要，使用 ＜b＞ 或 CSS。

2. 避免用 ＜b＞ 做语义强调：不要为了 SEO 或屏幕阅读器而滥用 ＜b＞，它不会有任何语义效果。

3. 适度嵌套 ＜strong＞：如果内容有明显的重要性层级，可以嵌套使用，但一般不超过两层。

4. 样式与结构分离：如果加粗只是为了视觉设计（比如所有二级标题加粗），请使用 CSS h2 { font-weight: bold; }。

5. 国际化考虑：在某些语言（如中文、日文）中，粗体并不像英文那样强调，但 ＜strong＞的语义仍然有效。屏幕阅读器会根据语言自动调整语调。

常见误区

九、代码示例对比

示例1：纯视觉粗体 —— 使用 ＜b＞ 或 CSS

.product-name {  font-weight: bold;}

＜p＞在本教程中，你将学习 ＜b＞React＜/b＞、＜b＞Vue＜/b＞ 和 ＜b＞Angular＜/b＞ 的基础知识。＜/p＞＜p＞推荐产品：＜span class="product-name"＞超薄充电宝＜/span＞ —— 仅重 100g。＜/p＞

效果：框架名称和产品名称加粗，但屏幕阅读器不会特别强调。

示例2：语义重要性 —— 使用 ＜strong＞

＜p＞  ＜strong＞警告：＜/strong＞  在进行任何维护操作之前，  ＜strong＞必须断开电源＜/strong＞，  否则有触电风险。＜/p＞

效果：屏幕阅读器会以更严肃的语调朗读“警告：”和“必须断开电源”，视障用户能立即意识到这是关键信息。

示例3：错误示范 —— 滥用 ＜strong＞

＜!-- 不要这样做 --＞＜p＞  ＜strong＞我们＜/strong＞ 公司 ＜strong＞提供＜/strong＞ 优质 ＜strong＞服务＜/strong＞。＜/p＞

问题：毫无语义价值，反而干扰屏幕阅读器用户，且可能被搜索引擎惩罚。

总结

最终建议

在现代 Web 开发中，请始终遵循 语义优先 原则。

• 需要表达重要性 → ＜strong＞。

• 只需要粗体视觉效果 → 使用 CSS font-weight: bold。

• 介于两者之间（如产品名、关键词）且不想引入额外 CSS 时，可以用 ＜b＞，但要明白它不具备语义力量。

正确区分和使用 ＜b＞ 与 ＜strong＞，是写出语义化、可访问、SEO 友好的 HTML 代码的基石之一。希望本文能帮助你在未来的项目中做出更专业、更负责任的选择。

​

阅读原文：原文链接