HTML em、strong 标签:强调、重要性与 b、CSS 的区别

HTML 中的 <em> 用于标记句子中的语气强调,而 <strong> 用于标记强烈的重要性、严肃性或紧迫性。浏览器通常将它们分别呈现为斜体和加粗文本,但应根据上下文中的含义选择元素,而不是依据其默认外观。

em 和 strong 有何不同?

当强调某个特定单词会改变句子的重点时使用 em。在“我今天检查了文件”中,强调“我”则聚焦于是谁检查的,而强调“今天”则聚焦于什么时候检查的。strong 标记内容本身的重要性,例如读者需要知道的警告或重要结论。

两个元素都可以在句子中使用。不要仅仅为了让段落看起来像大标题而包裹整个段落。文档标题的结构使用 h1 到 h6,并仅在必要时应用有意义的强调。

在完整示例中比较重点

将此文档保存为 emphasis.html 并在浏览器中打开。比较前两句话、重要指令以及仅使用视觉加粗样式的最后一句话的重音。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>区分强调与重要性</title>
  <style>.visual-bold { font-weight: bold; }</style>
</head>
<body>
  <h1>根据语境强调</h1>
  <p><em>我</em>今天检查了文档。</p><p>我<em>今天</em>检查了文档。</p><p><strong>替换文件前请检查备份。</strong></p><p>本文术语:<b>元素</b>和<b>属性</b></p><p>视觉样式示例:<span class="visual-bold">此处通过 CSS 加粗。</span></p></body>
</html>

在常见的默认样式下,“我”和“今天”会以斜体显示,而备份指令和标记为 b 的术语会以加粗显示。由于 CSS,span 也会加粗,但它不会成为表示强重要性的元素。字体和用户样式可能会改变外观,因此也应在措辞中清楚表达重要含义。

区分 b 与 CSS 加粗样式

选择 目的
em 标记句子中的重音和强调的焦点。
strong 标记重要性、严肃性或紧迫性。
b 引起对术语或其他文本的注意而不增加重要性。
CSS font-weight 在不增加重要性或其他 HTML 意义的情况下控制视觉粗细。

如果仅将 b 视为“没有意义的strong”,就会误解其目的:它是用来引起注意的。当只是为了外观时,请使用 CSS。同样,不要仅因为想要斜体文本而选择 em。

通过 CSS 删除 em 的斜体或更改 strong 的粗细不会改变 HTML 中表达的含义。相反,将 span 设置为加粗并不会赋予其 strong 的语义。辅助技术的实际公告因环境而异,因此不要假设特定的语音变化总是会发生。有关元素定义,请参见 MDN em 参考 、MDN strong 参考 和 MDN b 参考 。