表示强调语气，用于传达重读、反讽或情绪张力； 表示非常规语义的特殊状态，如外文词、科技术语、船名等，不暗示强调。
HTML 中 <em></em> 和 <i></i> 的语义区别到底在哪
不是“哪个更好看”，也不是“能不能换着用”——它们在 HTML5 规范里有明确分工：<em></em> 表示**强调语气**，浏览器通常用斜体渲染，但核心是传达“这句话里这个词被说话人刻意重读了”；<i></i> 表示**非文本常规语义的特殊状态**，比如外文词、科技术语、船名、思想流、小字号旁注等，它不暗示强调，只是标记“这段文字需要区别于周围语境来理解”。
实际写的时候，选错标签不会让页面崩，但会影响屏幕阅读器行为、SEO 解析，甚至团队协作时让人困惑你到底想表达什么。
什么时候必须用 <em></em>，不能用 <i></i>
当你想让听者（或辅助技术）感知到语言中的重音、反讽、对比或情绪张力时，只用 <em></em>。例如朗读时会提高音调或停顿的那个词。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 错误示范：
<i>这真的</i>太棒了—— 如果“真的”是反讽重点，用<i></i>会让屏幕阅读器平读，失去语气线索 - 正确写法：
这<em>真的</em>太棒了—— 辅助技术会加重/拖长“真的”，匹配口语逻辑 - 其他场景：
<em>唯一</em>支持该协议的浏览器、我们<em>不</em>推荐覆盖默认样式
什么时候该用 <i></i>，反而不能用 <em></em>
<i></i> 是为那些“本身就不属于主叙述流”的文字准备的。它不改变句子重心，只做类型标注。滥用 <em></em> 在这类场景里会误导语义解析。
- 外文术语：
这个函数返回一个<i>Promise</i>对象（Promise是专有名词，不是强调“Promise”这个词有多重要） - 生物分类：
<i>Homo sapiens</i>（斜体是生物学命名惯例，和语气无关） - 船名/飞机名：
首航的是<i>Queen Mary 2</i> - 手写体效果需求（无更好语义标签时）：
<i>签名处</i>—— 但优先考虑用 CSSfont-style: italic+ 语义中性标签如<span></span>
兼容性和可访问性容易踩的坑
老浏览器对 <em></em> 和 <i></i> 都渲染为斜体，所以光看样式看不出问题；真正出事是在语音输出、搜索引擎索引、自动化测试提取语义时。
- 屏幕阅读器对
<em></em>通常会改变语调或语速，对<i></i>则大多忽略样式，只按普通文本读 - 某些无障碍工具链会把
<em></em>当作“关键信息”高亮，而把<i></i>归类为“装饰性内容”降权处理 - 不要为了视觉一致强行统一用
<i></i>—— 比如把所有斜体都写成<i></i>，再用 CSS 改<em></em>样式，这等于主动丢掉语义 - React/Vue 等框架里，JSX 或模板中写错标签，不会报错，但 a11y linter（如 axe 或 eslint-plugin-jsx-a11y）会直接标红
最常被忽略的一点：很多人以为“只要看着是斜体就 OK”，其实语义错位在静态站点生成、爬虫抓取、语音交互设备上已经悄悄失效了。改起来不难，但得从第一行 HTML 就想清楚——你是在强调一个词，还是在标注一类词。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
