在 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 代码的基石之一。希望本文能帮助你在未来的项目中做出更专业、更负责任的选择。

​

阅读原文：原文链接