必须用强调语气(如反讽、转折),因其被屏幕阅读器重读且seo识别;仅用于外文词、术语等非强调场景;二者语义不同,不可因css覆盖而混淆用途。

别用 <i></i> 替代 <em></em> 来强调语气——屏幕阅读器不会重读,SEO 也不会识别重点。
什么时候必须用 <em></em>,不能用 <i></i>
当你想让“这个词被听出来是重点”时,<em></em> 是唯一合法选择。比如反讽、对比、意外转折或需要语音加重的词。
- 错误写法:
<i>真的</i>很好吃—— 屏幕阅读器平读,“真的”失去反讽感 - 正确写法:
这<em>真的</em>很好吃—— 辅助技术会拖长/加重“真的”,匹配口语逻辑 - 适用场景:教学材料中突出新术语(
HTML 中的 <em>语义化</em> 指内容与结构的对应关系)、用户提示中的关键动作(请<em>立即保存</em>配置)
什么时候该用 <i></i>,反而不能用 <em></em>
<i></i> 不是“斜体快捷键”,它是为特定文本类型打标签的:外文词、科技术语、船名、作品名、思想流、小字号旁注等——这些内容本身就不属于主叙述流,不需强调,只需区分。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 正确写法:
她读了 <i>Le Petit Prince</i> 的法语原版(外文词) - 正确写法:
参见 RFC <i>9110</i> 第 4.2 节(标准编号,非强调) - 错误写法:
点击 <em>提交</em> 按钮—— “提交”是操作按钮名,不是语气重点;应改用<span></span>+ CSS 或直接用<i></i>(若属惯例命名)
<em></em> 和 <strong></strong> 不是“斜体 vs 加粗”的样式选择
它们是两层不同的语义强度:<em></em> 是语气级强调(类似说话时抬音调),<strong></strong> 是内容级重要(类似拍桌子说“这事必须做”)。浏览器默认渲染不同,但核心差异在可访问性行为。
-
<em></em>:屏幕阅读器改变语调(升调/停顿),不改变语义权重 -
<strong></strong>:屏幕阅读器可能降调+加重,搜索引擎更倾向将其视为段落核心信息 - 嵌套示例:
你<em>绝对<sub>不要</sub></em>忽略 <strong>这个警告</strong>—— 外层是语气提醒,内层是事实级严重性
CSS 覆盖默认样式时,语义仍不可丢
即使你用 CSS 把 <em></em> 设成红色加粗、把 <i></i> 设成正常字体,它们的语义角色不变。辅助技术和爬虫只看标签名,不看最终渲染效果。
- 危险操作:
<em style="font-style:normal">注意</em>—— 视觉无斜体,但读屏软件仍会加重读出 - 更安全做法:真不需要强调,就别用
<em></em>;需要斜体纯视觉效果,用<span class="italic"></span>+ CSS - 团队协作中,错用
<i></i>写强调,会让 QA 或无障碍测试直接标为 bug
最容易被忽略的一点:语义错误不会报错,页面照样渲染,但一旦接入读屏软件、SEO 工具或自动化内容分析,问题立刻暴露——而那时返工成本远高于写代码时多敲两个字母。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










