HTML 里这两个斜体标签，90% 的人都用错了

写网页的时候，你是不是习惯把所有需要倾斜的文字直接丢给 CSS 样式？比如加个 font-style: italic 就完事了。乍一看没问题，但在语义化和无障碍访问越来越重要的今天，这种做法其实埋了隐患。HTML 里的 <i> 和 <em> 标签虽然默认渲染效果一样，但背后的逻辑完全不同。

混淆这两个标签，不仅会让搜索引擎难以理解页面重点，更可能让使用读屏软件的视障用户获取错误信息。今天咱们不背定义，直接聊聊在实际开发中，究竟该在什么场景下掏出哪个标签。

当“倾斜”不代表强调时：用 <i>

很多人觉得只要文字斜了，就该用强调标签，这是一个误区。<i> 标签在语义上其实是中立的。它表示这段文本采用了另一种语调或形式，但并没有改变句子的核心含义。

当你需要标注外来词、拉丁学名、船只名称或者表示人物内心独白时，<i> 是首选。比如文档中提到的生物分类名 Homo sapiens（智人），或者提到一艘船 Titanic（泰坦尼克号）。这些内容如果去掉斜体，并不会导致读者误解这句话的重点在哪里，它们更像是一种分类标记或视觉区分。

再比如你在写一篇小说式的交互文案，想展示角色的心理活动：“他心里想：这根本不可能。”这里用 <i> 包裹心理活动，意味着这是一种区别于旁白的声音，而不是在特别强调“不可能”这三个字本身。屏幕阅读器遇到 <i> 时，通常不会特意改变朗读语气，保持正常语速即可，这正是我们想要的“低调处理”。

当“倾斜”是为了重音时：用 <em>

如果说 <i> 是换个字体风格，那 <em> 就是要在句子里打拍子。它是 Emphasis 的缩写，代表应力强调。只有当你把这部分文字单独拿出来，句子的情感色彩或逻辑重心发生偏移时，才应该使用它。

举个例子，客服系统的自动回复：“我们没有收到您的订单。”如果把“没有”加上 <em> 标签，这就变成了强烈的否定，意在纠正用户的误解。如果是普通陈述，“我们没有收到”，语气平和。一旦使用 <em>，主流浏览器虽然只表现为斜体，但底层告诉读屏引擎：“此处请注意语气变化”。辅助技术通常会提高音调或放慢语速来突出这段内容。

SEO 角度也得提一嘴，虽然谷歌官方的算法在不断迭代，但合理的语义化标签始终有助于爬虫理解页面的核心关键词分布。滥用 <i> 做关键词强调，反而不如精准使用 <em> 来得有效，因为它传递了更强的权重信号。

快速决策：拿到需求怎么挑？

别纠结于记忆规则，下次写代码前，问自己一个简单的问题：“如果我拿掉这个标签的样式，读者会不会漏掉重点？”

如果答案是肯定的，比如警告信息、关键转折词、情感强烈的动词，直接选 <em>。它不仅是样式，更是内容的骨架。

如果答案是否定的，比如专业术语、外语词汇、只是单纯为了美观区分的短语，那就大方地交给 <i>。哪怕视觉上都是斜体，语义上的清晰能让你的代码在未来更容易维护，也更能兼容各种新型终端设备。

写在最后

代码不仅是写给机器看的，更是写给未来的开发者以及所有用户看的。区分 <i> 和 <em> 不需要多复杂的技巧，需要的是一点点对细节的尊重。别让样式掩盖了语义，让每一个标签都回到它本该在的位置上。 这种微小的优化，汇聚起来就是更友好、更专业的互联网体验。