em标签用于语义强调，表示语气重读，影响屏幕阅读器语调和SEO权重；i标签仅表视觉区分，适用于外文词、术语等非强调场景，误用会损害可访问性和语义准确性。
em 标签不是“加斜体的快捷键”，而是语义标记
它告诉浏览器和辅助技术：“这个词在语气上被重读了”，不是“让它变斜就行”。屏幕阅读器会改变语调，搜索引擎会识别强调权重，CSS 也能通过 em 选择器统一控制强调文本的渲染逻辑。如果只图视觉效果，em 反而容易引发语义污染。
i 标签只表示“这段文字类型不同”，不传递强调意图
i 的本职是标记外文词、科技术语、船名、思想流、古籍旁注等——这些内容需要视觉区分，但和“重音”“重点”无关。例如：
<p>《<i>The Great Gatsby</i>》中，<i>Gatsby</i> 的名字反复出现</p>
常见误用场景包括：
- 用
<i>注意：此操作不可逆</i>替代<em>注意：此操作不可逆</em>—— 这里是语气强调，不是术语 - 在中文文档里给“API”“JSON”加
i—— 它们已是通用术语，无需额外语义隔离；若需强调，应优先用em - 用
i实现图标字体（如<i class="icon-home"></i>）—— 这属于历史遗留写法，现代应改用span+ ARIA 属性
em 和 i 在可访问性与 SEO 上表现差异明显
两者默认都渲染为斜体，但行为完全不同：
立即学习“前端免费学习笔记（深入）”；
- 读屏软件对
em通常抬高语调或稍作停顿；对i则按普通文本平读 - Google 不会因用了
i就提升关键词权重；但连续嵌套em（如<em>非常</em><em>重要</em>）可能被视作语义过载，反而削弱可信度 - CSS 中
em是相对单位，和em标签同名但无关联；别因命名巧合误以为样式能“继承”语义
什么时候该用 em，什么时候必须换 i
判断依据只有一个：这段斜体文字是否承载说话人刻意加强的语气？
- 用
em： “你必须保存后再退出” → “你必须保存后再退出”（语气强制） - 用
i： “这个函数返回一个 Promise 对象”（Promise 是专有名词，非强调） - 禁用
i： “请确认 已备份 数据” —— “已备份” 是动作状态，需强调，应改用em - 禁用
em： 船名 “Titanic” —— 这是约定俗成的书写惯例，不是语气强调，应改用i
真正容易被忽略的是：很多开发者把 em 当成“安全的斜体替代品”，结果在文档里堆砌大量无实质强调意义的 em，反而稀释了真正关键信息的语义信号。
