em表示语气强调，影响句子语义；strong表示内容重要性，不改变原意。二者语义不同，错用损害可访问性、SEO与合规性，不可仅凭视觉样式混淆或用i/b替代。
em 和 strong 都是语义化行内标签，但它们传达的不是“要不要加粗/斜体”，而是“为什么要加粗/斜体”——这个底层意图一旦错用，会影响可访问性、SEO 甚至法律合规性。
em 表示语气强调，影响句子语义
当你想模拟说话时的重音、反讽、对比或临时聚焦，就该用 em。它会改变所在句子的语义逻辑，比如“<em>只</em>支持 Chrome 110+”中的“只”暗示排他性；换成 strong 就变成“这很重要”，语义跑偏了。
屏幕阅读器通常用语调变化（如升调、拖长）来朗读 em 内容，而不是加重音量。以下情况适合用 em：
- 引入新术语：
<em>WebAssembly</em> 是一种二进制指令格式 - 表达态度：“你确定要
<em>真的</em>删除？” - 对比强调：“不是
<em>点击</em>，是<em>长按</em>”
strong 表示内容重要性，不改变句子原意
strong 标记的是信息层级上的关键项，和语气无关。它强调“这部分不能忽略”，但不改变句子本身的逻辑结构。例如错误提示“<strong>密码不能为空</strong>”——删掉 strong，句子依然成立，只是重要性丢失。
立即学习“前端免费学习笔记（深入）”；
辅助技术（如 NVDA、VoiceOver）会明确告知用户“此内容重要”，并可能配合停顿或音效。适用场景包括：
- 安全警告：
<strong>此操作不可撤销</strong> - 法律条款中的责任主体：
用户须自行承担<code><strong>全部风险</strong> - 表单必填项标识：
邮箱地址 <strong>（必填）</strong>
别用 CSS 覆盖默认样式来混淆语义
有人给 em 加 font-weight: bold，再给 strong 加 font-style: italic，以为“视觉统一就好”。这是危险的——视觉样式可变，但语义锚点固定。屏幕阅读器不会因为你改了 CSS 就把 strong 当成语气强调处理。
真正该做的是：
- 保持浏览器默认样式（
em斜体、strong加粗），除非有明确设计规范要求覆盖 - 用 CSS 控制外观时，确保
em和strong的视觉差异仍可区分（比如不同颜色+不同字体样式组合） - 绝不要用
i或b替代它们来“省事”，那等于放弃语义
嵌套使用时注意层级关系
em 和 strong 可以互相嵌套，但必须符合语义逻辑。比如：<strong>请立即备份</strong>，尤其是<em>数据库配置文件</em>——外层强调紧迫性，内层强调具体对象，层次清晰。
反例是：<em>请<strong>立即</strong>备份</em>。这里“立即”本应是强度副词，属于重要性范畴，不该被包裹在语气强调里；而整个短语又没体现出需要语气重读的上下文。
复杂页面中，最容易被忽略的是：同一段文字里混用 em 和 strong 却没有统一判断标准。建议团队在组件库文档中明确定义每种强调的触发条件，而不是靠开发者直觉。
