em标签用于语义强调，i标签仅表示斜体样式；em被屏幕阅读器识别为重读或关键信息，i无语义，仅视觉倾斜，误用影响无障碍访问和SEO。

em 标签表达语义强调，i 标签仅表示斜体样式

em 是语义化标签，浏览器和屏幕阅读器会把它理解为“此处内容有强调语气”，比如重读、反讽或关键信息。而 i 只是视觉上让文字倾斜，没有语义含义，类似 span 加了 font-style: italic。用错会导致无障碍访问出问题，也影响 SEO 对内容重点的识别。

什么时候该用 em，而不是 i

以下情况优先用 em：

• 句子中需要语音重读的部分，比如“

  <em>不是</em>不能做，而是不该做”</li>
  <li>术语首次出现（尤其技术文档），如“<code><em>DOM</em> 树由节点构成”</li>
  <li>表示疑问、否定或特殊含义，比如“这叫‘<code><em>优雅降级</em>’，不是妥协”</li>
  </ul>
  <p>用 <code>i

  的典型场景反而很窄：
  • 外文短语（如 <i>et al.</i>、<i>caveat emptor</i>）
  • 船名、作品标题等传统斜体惯例（如 <i>The Great Gatsby</i>）
  • 纯装饰性斜体，且确认无任何强调意图

  i 标签在现代 HTML 中并未废弃，但语义风险高

  HTML5 明确保留了 i，但规范里特别提醒：“不要仅仅为了斜体效果而用它”。如果你只是想让一段文字变斜体，更稳妥的做法是用 CSS：span + font-style: italic。这样既避免语义污染，又便于统一控制样式。用 i 容易被后续维护者误以为有语义，结果在无障碍测试中暴露问题——比如屏幕阅读器不会给 i 加特殊语调，但会为 em 调整停顿和重音。

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载

  立即学习“前端免费学习笔记（深入）”；

  检查是否用错的快速方法

  问自己两个问题：

  • 如果去掉斜体样式，这段话的意思或语气会变吗？如果会，该用 em
  • 这个斜体是否遵循某种出版惯例（比如拉丁短语、动植物学名），且与强调无关？那 i 才合适

  实际项目里，90% 的斜体需求其实属于语义强调，em 才是默认选择。把 i 当作“斜体开关”来用，是早期 HTML 习惯遗留下来的惯性误区。