HTML 的 ＜strong＞ 元素

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>
• 仅需视觉加粗 → 用 <b> 或 CSS
• 结合 CSS 自定义样式，兼顾语义与美观
• 善用语义，提升页面的可访问性

掌握 <strong> 的正确用法，是写出语义化、可维护、无障碍 HTML 的重要一步。