1. 引言
在 HTML 中，想要让文字「加粗」显示，最直接的想法可能是使用 <b> 标签。但在现代 Web 开发中，我们更推荐使用 <strong> 元素。它不仅仅让文字变粗，更重要的是它赋予了文字语义上的重要性。本文将带你全面了解 <strong> 元素的用法、与 <b> 的区别，以及在实际开发中的最佳实践。
2. 什么是 <strong> 元素
<strong> 是一个短语内容（Phrasing content）元素，用于表示其包含的内容具有较强的重要性、严重性或紧急性。浏览器默认会以加粗的样式来呈现它，但这只是视觉上的默认表现，其核心价值在于语义。
<p>请注意：<strong>请勿在雷雨天气使用电器</strong>，以免发生危险。</p>
上面的代码中，「请勿在雷雨天气使用电器」被标记为重要内容，屏幕阅读器等辅助技术会通过语音强调这段文字，帮助视障用户感知其重要性。
3. 基本语法与属性
<strong> 是一个双标签元素，语法非常简单：
<strong>重要内容</strong>
它支持 HTML 的全局属性（如 class、id、style 等），但没有自己专属的特定属性。
<p>本次考试<strong class="highlight">及格线为 60 分</strong>，请同学们认真备考。</p>
4. <strong> 与 <b> 的区别
这是初学者最容易混淆的地方。两者在浏览器中默认都显示为加粗，但语义完全不同：
| 元素 | 语义 | 适用场景 |
|---|---|---|
<strong> | 表示内容重要性 | 警告、关键结论、重点提示 |
<b> | 仅表示样式加粗，无语义 | 产品名称、关键词（不强调重要性） |
<!-- 语义正确：强调重要性 -->
<p><strong>警告：</strong>系统将在 5 分钟后自动重启。</p>
<!-- 语义正确：仅样式加粗，不强调重要性 -->
<p>欢迎使用 <b>ChatGPT</b> 写作助手。</p>
核心原则：如果文字本身具有「重要性」的含义，用 <strong>；如果只是视觉上想加粗、没有强调语义，用 <b> 或 CSS font-weight。
5. 嵌套使用
<strong> 可以嵌套在其他元素中，也可以嵌套自身以表示更高层级的重要性：
<p><strong>重要：</strong>请先阅读<strong>用户协议</strong>，特别是<strong><strong>隐私条款</strong></strong>部分。</p>
不过在实际开发中，不建议过度嵌套，一般一层就足够表达重要性了。
6. 与 CSS 的配合
虽然 <strong> 默认加粗，但你可以通过 CSS 覆盖其默认样式，让它以其他方式呈现（例如变色、加大字号），同时保留语义：
strong {
font-weight: 700;
color: #d93025;
}
<p>系统检测到<strong>3 个安全漏洞</strong>，请立即修复。</p>
这样既保留了「重要性」的语义，又通过颜色进一步强化了视觉提示。
7. 可访问性（Accessibility）
<strong> 对可访问性有积极意义：
- 屏幕阅读器会以不同的语音语调或音量来朗读
<strong>中的内容，帮助视障用户感知重要性。 - 相比纯 CSS 加粗（
font-weight: bold），<strong>提供了非视觉用户也能感知的语义信息。
<p>付款前请<strong>仔细核对收货地址</strong>，一旦提交无法修改。</p>
8. 常见误区
- 误区一：用
<strong>只是为了加粗 → 应优先考虑语义，再考虑样式。 - 误区二：用
<b>强调重要内容 → 语义不足，应改用<strong>。 - 误区三：用
<strong>代替标题（<h1>~<h6>）→ 标题有独立的语义层级，不应混淆。
9. 总结
<strong> 是 HTML 中表达「重要性」语义的标准元素，默认加粗显示，但价值远不止于视觉。在实际开发中，请遵循以下原则：
掌握 <strong> 的正确用法，是写出语义化、可维护、无障碍 HTML 的重要一步。
转载自 CSDN-专业IT技术社区
