illegalCreed

中文

English

中文

English

Appearance

强调与重要性 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • <em>：强调——朗读时重读、会改变句意（「我喜欢猫」≠「我喜欢猫」）；屏幕阅读器可改变语调
  • <strong>：重要 / 严肃 / 紧急——不改变句意，只标「这部分最要紧」（警告、关键步骤）
  • <b>：引人注意但无重要性——关键词、产品名、文章导语里的提要，纯「视觉醒目」的语义占位
  • <i>：异声 / 异质——外文词、术语、思想活动、作品名（也可用 <cite>）、分类名
  • 嵌套加深：<em> 套 <em>、<strong> 套 <strong> 会逐级加深强调 / 重要程度
  • 铁律：只想变粗 / 变斜 → 用 CSS font-weight / font-style，别借这四个元素当样式钩子
  • 四选一口诀：重读强调→em；内容重要→strong；只是醒目→b；异声外文→i

核心：语义 vs 样式 ​

这四个元素的视觉默认值只有两种——<strong> / <b> 加粗，<em> / <i> 倾斜。正因为「长得一样」，它们成了 HTML 里最大的混淆源。但浏览器渲染相同，语义层面却天差地别：屏幕阅读器、搜索引擎、复制到 Word 的「样式」、未来维护者读到的「意图」，全靠你选对元素。

记住一条总纲：<strong> / <em> 携带语义（重要 / 强调），<b> / <i> 几乎只是「带一点点语义的样式占位」。 而如果你要的纯粹是「这里加粗好看」，那连这四个都不该用——直接 CSS。

<em>：强调（会改变句意） ​

<em> 表示重音强调（stress emphasis）——就是朗读时你会重读的那个词，重读的位置不同，整句意思也不同：

html
<p>我<em>喜欢</em>猫。</p>      <!-- 强调「喜欢」这个程度 -->
<p>我喜欢<em>猫</em>。</p>      <!-- 强调是「猫」而不是别的动物 -->

WHATWG 规范明确：强调的「程度」由祖先 <em> 的层数决定，嵌套越深、强调越强：

html
<p><em>叫一辆<em>出租车</em>！</em></p>

不要把 <em> 当斜体用

「我想让这几个字变斜」不是用 <em> 的理由。屏幕阅读器可能会用不同语调读出 <em> 的内容，给本无强调的文字套上 <em>，等于让朗读「无故变调」。纯样式请用 CSS font-style: italic；若是外文 / 术语 / 异声，用下面的 <i>。

<strong>：重要（不改变句意） ​

<strong> 表示强重要性、严肃或紧急。它和 <em> 的根本区别是：<strong> 不改变句子的意思，只是标出「这部分比周围更要紧」——典型是警告、关键提示、必读条款：

html
<p><strong>警告：</strong>此操作不可撤销。</p>
<p>使用前请<strong>务必</strong>阅读安全须知。</p>

同样可以嵌套加深重要性，常见于「重要之中更重要」：

html
<p><strong>大促规则：满 300 减 50，
  <strong>仅限今日</strong>。</strong></p>

<em> 还是 <strong>？ ​

一句话区分（MDN 的经典例子）：

  • <em> 改变朗读重音进而改变语意：「I love carrots」对比「I love carrots」；
  • <strong> 给一部分内容加上重要性：「Warning! This is very dangerous.」。

经验法则：能用「（停顿、加重语气）」念出来的是 <em>；像贴了一张「重要！」标签的是 <strong>。

<b>：引人注意（无重要性） ​

<b> 表示「出于实用目的需要引起注意、但并不更重要」的文字——关键词、产品名、文章开头的导语、评测里的对象名。它是「在没有更合适的语义元素时，用来替代纯样式加粗」的兜底：

html
<p>本次评测的主角是 <b>MacBook Pro M5</b>。</p>
<p><b>太长不看：</b>性能强，续航一般，价格偏高。</p>

<b> 还是 <strong>？ ​

  • <strong>：内容确实重要（警告、关键步骤），有语义分量；
  • <b>：只是想让某些词视觉上跳出来（关键词、专名），并不暗示它更重要。

把整段警告标成 <b> 是错的（它重要，该用 <strong>）；把文章里每个产品名标成 <strong> 也是错的（它们不重要，只是想醒目，该用 <b> 或干脆 CSS）。

<i>：异声 / 异质 ​

<i> 表示「一段处于不同声音或语气」的文字——它「读起来不一样」，但不构成强调。规范列举的典型用途：

  • 外文词、音译词：<i lang="la">in vitro</i>、<i lang="fr">déjà vu</i>；
  • 技术术语、分类学名：<i>Homo sapiens</i>；
  • 思想活动、内心独白、舰船名等专名；
  • 作品标题（也可更精确地用 <cite>，见 行内语义页）。
html
<p>他露出一丝 <i lang="fr">je ne sais quoi</i> 的神情。</p>
<p>学名 <i>Felis catus</i> 指的就是家猫。</p>

给外文 <i> 加上 lang

当 <i> 包的是外文时，配上 lang 属性（如 lang="fr"）能帮屏幕阅读器切换正确发音、帮浏览器正确断词。这也是 <i> 比「裸 CSS 斜体」更有价值的地方。

<i> 还是 <em>？ ​

  • <em>：强调，会改变朗读重音和句意；
  • <i>：异声 / 异质（外文、术语、专名），语气不同但不构成强调。

「这是个法语词所以排斜」用 <i>；「这个词要重读」用 <em>。

四者对照 ​

元素语义默认样式典型场景屏幕阅读器
<em>强调（改变句意）斜体重读的词可能改变语调
<strong>重要 / 严肃 / 紧急加粗警告、关键步骤可能提示重要
<b>引人注意（无重要性）加粗关键词、产品名、导语一般不特殊处理
<i>异声 / 异质斜体外文、术语、专名一般不特殊处理

决策流程 ​

遇到「想加粗 / 加斜」时，按这个顺序自问：

  1. 它会改变这句话的意思 / 朗读重音吗？→ 是则 <em>；
  2. 它内容上很重要（警告、必读、关键）吗？→ 是则 <strong>；
  3. 它是外文 / 术语 / 专名 / 异声吗？→ 是则 <i>（外文加 lang）；
  4. 它只是想视觉醒目（关键词、产品名）吗？→ 是则 <b>；
  5. 以上都不是，纯粹为了好看？→ 用 CSS font-weight / font-style，别套这四个元素。

小结 ​

<strong> / <em> 是「带语义的」（重要 / 强调），<b> / <i> 是「带一点语义的样式占位」（醒目 / 异声），而纯样式归 CSS。选对了，屏幕阅读器和搜索引擎才读得懂你的意图。下一页把视野扩到整个行内语义家族——代码、引用、时间、缩写：行内文本语义全谱。