一文讲透 HTML 中 <i> 与 <em> 的本质区别
在 HTML 的世界里，＜i＞ 和 ＜em＞ 就像一对长得一模一样的双胞胎——它们在浏览器中默认都显示为 斜体，这让无数开发者误以为可以随意互换使用。然而，HTML5 赋予了它们截然不同的“性格”：一个代表“不同性质的内容”，另一个代表“语气上的强调”。选错标签，不仅会让屏幕阅读器用户产生误解，还可能影响搜索引擎对内容重要性的判断。
本文将从历史、语义、样式、可访问性、SEO 等维度，带你彻底理清这两个元素的关系，并给出可直接套用的代码模板和决策流程。
对比维度 | ＜i＞ 元素 | ＜em＞ 元素 |
全称 | Italic（斜体） | Emphasis（强调） |
语义本质 | 标识“与周围文本性质不同的内容” | 标识“需要语气上强调的内容” |
对句子含义的影响 | 几乎无影响 | 显著改变句子的理解重点 |
默认浏览器样式 | 斜体 | 斜体 |
屏幕阅读器行为 | 普通语调朗读 | 重音、变调或放慢语速 |
SEO 权重 | 无特殊权重 | 通常给予更高重要性 |
典型例子 | 外来词、技术术语、学名、船名、内心想法 | “必须完成”、“不是今天” |
HTML 2.0 ~ 4.01：＜i＞ 只是一个样式标签，作用等同于 CSS 的 font-style: italic;，没有任何语义。
HTML5：为了推动语义化，W3C 重新定义了 ＜i＞——它表示一段文本由于某种原因与周围文本不同，但这种不同并不是强调。例如：技术术语、外来词、分类学名称、作品标题、内心独白等。
从 HTML 2.0 开始，＜em＞ 就一直被定义为 强调（emphasis）。它模拟的是口语中的重音。例如：
“我 没拿 你的钱包” vs “我没拿 你的 钱包” —— 强调的词不同，含义天差地别。
在 HTML5 中，＜em＞ 的地位被进一步强化，与 ＜strong＞（表示重要性，而非强调语气）形成互补。
技术术语
＜p＞请参考 ＜i＞API＜/i＞ 文档获取密钥。＜/p＞
外来词或短语
＜p＞这家餐厅的招牌菜是 ＜i＞coq au vin＜/i＞（红酒炖鸡）。＜/p＞
生物或分类学名
＜p＞现代人类的学名是 ＜i＞Homo sapiens＜/i＞。＜/p＞
作品标题（短篇）
＜!-- 注：长篇作品通常用 ＜cite＞，但 ＜i＞ 也可接受。--＞＜p＞他最近在读 ＜i＞老人与海＜/i＞。＜/p＞
内心想法或梦境描写
＜p＞＜i＞这下糟了＜/i＞，他心里嘀咕着。＜/p＞
特定专有名词（如船名、飞机名）
＜p＞泰坦尼克号（＜i＞Titanic＜/i＞）在首航中沉没。＜/p＞
纠正错误信息
＜p＞会议时间是 ＜em＞周三＜/em＞，不是周二。＜/p＞
强调动作的必要性
＜p＞您 ＜em＞必须＜/em＞ 在提交前保存更改。＜/p＞
对比两个事物
＜p＞我 ＜em＞喜欢＜/em＞ 夏天，而不是冬天。＜/p＞
表达意外或惊讶的重点
＜p＞这次考试居然 ＜em＞是你＜/em＞ 得了第一？＜/p＞
默认相同：在大多数浏览器中，＜i＞ 和 ＜em＞ 的默认样式都是 font-style: italic;。
样式可任意覆盖：你可以通过 CSS 将它们改成任何样子——加粗、变色、加背景，甚至恢复正常字体。
/* 例子：将 ＜em＞ 改为红色加粗，不再斜体 */em { font-style: normal; font-weight: bold; color: #d32f2f;}
黄金法则：如果你仅仅需要斜体的视觉效果，而不带任何语义，请使用 CSS：
＜style＞.italic-deco { font-style: italic; }＜/style＞＜span class="italic-deco"＞仅装饰性斜体＜/span＞
元素 | 屏幕阅读器行为（NVDA / VoiceOver 实测） |
＜i＞ | 通常以 普通语调 直接读出内容，不会改变音高或速度。有时会提示“斜体”，但多数用户不会察觉差异 |
＜em＞ | 以 强调语调 读出——音调略微升高、语速稍慢，让用户感知到该部分很重要 |
假设你写了一段警告：“请 ＜em＞务必＜/em＞ 关闭电源”。使用 ＜em＞ 后，视障用户会听到“请 务必 关闭电源”，重音落在“务必”上，清晰传达风险。如果误用 ＜i＞，则平淡地听到“请务必关闭电源”，重点完全丢失。
永远不要用 ＜i＞ 来代替 ＜em＞。
不要滥用 ＜em＞，否则满屏都是强调，等于没有强调。
Google 官方指南：搜索引擎会分析 HTML 语义。＜em＞ 中的文本通常被认为 更具相关性，在计算关键词权重时会略有加成。
＜i＞ 的作用：帮助搜索引擎理解术语、外来词等上下文，但不会直接提升排名。
建议：合理使用 ＜em＞ 突出核心观点，但不要堆砌关键词。自然写作优先。
需要斜体效果？├─ 只是为了好看？ → 用 CSS（font-style: italic）└─ 带有语义目的？ ├─ 想改变句子语气/重音？ → 用 ＜em＞ └─ 只是标记不同类型的内容（术语/外来词/学名/想法）？ → 用 ＜i＞
有时你需要在一个句子中同时使用二者，这是完全合法的：
＜p＞ 在法语中，＜i＞merci beaucoup＜/i＞ 的意思是“非常感谢”， 但你 ＜em＞必须＜/em＞ 注意发音。＜/p＞
错误的嵌套：不要为了“更强效果”而把两个标签叠在一起：
＜!-- 不要这样做，语义冗余且混乱 --＞＜p＞＜i＞＜em＞警告＜/em＞＜/i＞：高压危险。＜/p＞
如果你需要比 ＜em＞ 更强的语气，可以考虑 ＜strong＞（表示重要性，而非强调）。
误区 | 正确理解 |
＜i＞就是斜体，＜em＞也是斜体，所以一样。 | 语义完全不同，影响无障碍和SEO。 |
我想强调某个词，用 ＜i＞ 也可以。 | 屏幕阅读器不会强调 ＜i＞，视障用户会错过信息。 |
＜em＞可以多层嵌套表示更强强调。 | 嵌套无实际效果，多层 ＜em＞ 仍只读一次强调。 |
把整个段落都包在 ＜em＞ 里，表示这一段很重要。 | 错误，全段强调等于无强调。重要段落可用 ＜strong＞ 或标题。 |
语义是根本：＜i＞ 用于“不同性质的内容”，＜em＞ 用于“语气强调”。不要被相同的斜体样式迷惑。
可访问性第一：屏幕阅读器会特别处理 ＜em＞，而对 ＜i＞ 平淡对待。选错标签会让视障用户错过关键信息。
纯样式请用 CSS：当只需要斜体外观时，使用 font-style: italic;，不要污染语义标签。
SEO 有细微差异：＜em＞ 中的文本通常获得稍高的权重，但不应滥用。
决策简单化：问自己“我想改变句子的重音吗？” → 是，用 ＜em＞；否，但需要标记特殊术语/外来词 → 用 ＜i＞；否则用 CSS。
✅ 为 外来词、术语、学名、内心想法使用 ＜i＞。
✅ 为 纠正、必要动作、对比、意外重点使用 ＜em＞。
✅ 为 纯视觉效果使用 CSS font-style: italic;。
❌ 不要为了斜体而使用 ＜i＞ 或 ＜em＞。
❌ 不要将 ＜i＞ 与 ＜em＞ 嵌套在一起。
❌ 不要将整段文字包裹在 ＜em＞ 中。
通过正确运用这两个看似相似实则迥异的标签，你的 HTML 文档将更加语义清晰、无障碍友好且易于维护。
记住：写代码时多花一秒思考语义，未来维护的人（包括你自己）会感谢你。
阅读原文：https://mp.weixin.qq.com/s/FpQTK7JOL0uplRkZwJO6WA
