该用 标签时是标记无语义强调但需斜体呈现的文本，如外文短语、技术术语、作品名、生物分类名；需语义强调则用 或 。

什么时候该用 <i></i> 标签而不是 <em></em>

<i></i> 的核心作用不是“加斜体”，而是标记一段**无语义强调、但按惯例需斜体呈现**的文本。浏览器默认把它渲染成斜体，但这只是副作用。

常见适用场景包括：

• 外文短语（如 <i>bon appétit</i>、<i>status quo</i>）
• 技术术语（如 <i>integer</i>、<i>HTTP</i>）
• 作品名（书名、电影名、歌曲名，如 <i>Inception</i>）
• 生物分类名（如 <i>Homo sapiens</i>）

反例：别用 <i></i> 包“错误提示”“必填项”“警告”——这些需要语义强调，该用 <em></em> 或更合适的 <strong></strong>、<span></span> + ARIA。

<i></i> 和 CSS font-style: italic 的关键区别

两者视觉效果可能一样，但底层逻辑完全不同：

• <i></i> 是 HTML 元素，有明确的语义定位（HTML5 定义为 “idiomatic text”），会被读屏软件识别为一类特殊文本，但不会改变语音重音
• font-style: italic 是纯样式控制，不带任何语义，对辅助技术完全透明
• 字体支持差异：italic 优先调用字体中真实设计的斜体字形；若缺失，浏览器会 fallback 到 oblique（机械倾斜），效果生硬。而 <i></i> 不影响字体选择逻辑，它只触发浏览器默认样式（即 font-style: italic）

所以：想表达“这是个术语”，用 <i></i>；只想让某段文字看起来歪一点，直接上 style="font-style: italic" 更干净。

容易被忽略的可访问性陷阱

<i></i> 本身不报错，但乱用会削弱信息传达：

• 用 <i></i> 包图标字体（比如 <i class="fa fa-user"></i>）却不加 aria-hidden="true" → 屏幕阅读器可能误读图标类名或空白
• 仅靠斜体标“暂无数据”“已失效”等状态，没配 aria-live 或显式文案 → 视力障碍用户完全感知不到变化
• 在表单里用 <i>*</i> 表示必填，却没同步加 required 属性或 aria-required="true" → 表单验证和读屏行为脱节

WCAG 明确要求：颜色、斜体、大小等纯视觉线索不能是信息传达的唯一方式。

现代项目里要不要继续用 <i></i>

可以，但得有意识地用：

• 如果你的团队/项目已统一用 CSS 类（如 .term、.title）控制这类文本样式，那 <i></i> 就没必要出现——语义已由 class 承载，样式由 CSS 控制，更灵活也更可控
• 若内容来自 CMS 或富文本编辑器，且运营人员习惯用“斜体按钮”输入外文或书名，保留 <i></i> 反而比强制转成 <span class="italic"></span> 更符合直觉
• 注意：不要为了“代码看起来整齐”而把所有斜体都塞进 <i></i> —— 比如 <p>点击 <i>提交</i> 按钮</p> 中的“提交”是操作名，不是术语，这里用 <code> 或 <kbd></kbd> 更准确

真正难的从来不是怎么让字歪，而是判断“这段歪掉的文字，到底想告诉人什么”。