为什么 em 和 strong 比 i 和 b 更值得用？语义区别解析

结论：<em> 和 <strong> 表达的是语义——语气强调和重要性；<i> 和 <b> 表达的是外观——斜体和加粗。只想要样式就交给 CSS；只有需要让机器（读屏软件、搜索引擎、内容抽取工具）读懂"这个词在句子里为什么特殊"时，才用 em/strong。

em 和 strong 与 i 和 b 的语义区别是什么？

结论：<em> 表示"强调"（stress emphasis），会改变句子含义；<strong> 表示"重要性/严肃性/紧迫性"，不改变句子含义，只标记权重。

举个能说明问题的例子：

• 「我没有说他拿了钱」——重音落在"没有"，句意是"我没指控他"，<em> 标的就是这种会改变理解的词。
• 「注意：本操作不可撤销」——这里没有语气重音，只有重要性，该用 <strong>。

HTML 规范里对 <i> 的定义是"另一种语气或情绪、术语、外来词、音译词、学名、内心想法"，对 <b> 的定义是"吸引注意但不表达重要性"，典型场景是摘要里的关键词、评测里的产品名。所以两者的差别是：em/strong 携带"这个词为什么特殊"，i/b 只携带"这个词看起来不一样"。

浏览器 UA 样式表默认给 <em> 加 font-style: italic、给 <strong> 加 font-weight: bolder，这正是误解的来源——默认样式刚好等价于 i 和 b，但样式能用 CSS 改，语义改不了。

屏幕阅读器和搜索引擎真的在意 em/strong 吗？

结论：在意的是语义层，但不要指望每次都被朗读出来。

Chrome、Firefox、Safari 会把 <em> 映射到 ARIA 1.2 定义的 emphasis 角色、<strong> 映射到 strong 角色，写进无障碍树；<i> 和 <b> 不映射任何语义角色。NVDA、JAWS、VoiceOver 是否真的念出"强调"，取决于版本和用户的详细朗读设置，所以无障碍是加分项而不是唯一理由。

搜索引擎层面，Google 搜索中心和 John Mueller 都公开表示过：文字加粗与否不构成排名因素，<strong> 不会直接提升关键词排名。它的价值在于内容抽取和可读性——结构化工具能分清哪句是重点，哪句只是排版。

另外 <em> 和 <strong> 可以嵌套表示更强的程度（规范允许），<b> 嵌套没有任何语义叠加。

什么情况下该用 i 和 b，而不是直接删掉？

结论：i 和 b 在 HTML5 里是被重新定义过的合法元素，不要无脑全局替换。

<i> 的正当用法：<i lang="fr">déjà vu</i> 标外来词、<i>Homo sapiens</i> 标学名、小说里的内心独白。

<b> 的正当用法：文章摘要里抽出的一串关键词、用户评论里提到的产品名——你想让它醒目，但它并不比周围文字更重要。

这里有个常见错误：把全站 <b> 用 sed -i 's/<b>/<strong>/g' 一把梭换成 <strong>。结果是给读屏用户播报了上百个"重要"，把警告语和普通关键词混成同一个级别，语义反而更糟。

怎么把已有的 i 和 b 迁移到 em/strong？

结论：先定位、再人工判断意图、最后补 CSS 保证视觉零变化。

1. 先列出范围：grep -rn "<\(i\|b\)[ >]" src/，拿到全部引用点。
2. 逐个判断意图：会改变句意的语气重音 → <em>；表示重要性、风险、警告 → <strong>；只是要粗体或斜体的视觉效果 → <span class="..."> 或直接给元素加 class。
3. 加 CSS 保证渲染不变，例如 strong { font-weight: 600; }、em { font-style: italic; }，避免默认样式和设计稿冲突。
4. 验证：用 Chrome DevTools 的 Accessibility 面板查看计算出的 role，应为 emphasis 或 strong；再和改动前的截图做视觉对比。
5. 只有在确认语义一致时才能批量替换，跨文件的自动替换基本都会误判。

只用 CSS 加粗斜体行不行？

结论：如果那个词在语义上没有任何特殊性，纯 CSS 才是最正确的做法。

HTML 负责语义，CSS 负责表现。用 <b> 和 <i> 来表达"我要粗体/斜体"，是 HTML4 时代的思路；今天更好的写法是 <span class="keyword"> 加上 font-weight 或 font-style。反过来，为了 SEO 硬塞一堆 <strong> 也不划算——排名不会动，还会稀释真正的重点。

一句话收束：视觉问题用 CSS 解决，语义问题用 em 和 strong 解决，i 和 b 只留给术语、外来词、学名和"醒目但不重要"的关键词这几类明确场景。