必须用表示内容重要性，用表示语气/逻辑强调；二者语义不可互换，删掉会影响关键决策或安全判断，删掉会改变句意或丢失反讽转折等语气信息。
直接结论：用 <strong> 表示内容重要性，用 <em> 表示语气/逻辑强调；二者不可互换，也不该为“看起来粗或斜”而选错。
什么时候必须用 <strong> 而不是 <b>
当你加粗的部分删掉后，用户可能漏掉关键决策依据或安全风险时，<strong> 是唯一语义正确的选择。
- 表单校验失败提示中的错误原因：
<p>邮箱格式<strong>不正确</strong>，请检查</p>—— “不正确”是判断核心，不是装饰 - 价格锚点：
<span>原价</span><strong>¥299</strong><span>现价</span><strong>¥199</strong>—— 用户靠这个比价下单 - 法律条款义务词：
<p>乙方<strong>必须</strong>于7日内响应</p>—— “必须”触发履约责任，不是视觉点缀 - 错误写法：
<p>本项目基于<b>Vue</b>构建</p>—— “Vue”是技术名词，无强调意图，<b>或<i>更合适
什么时候该用 <em> 而不是 <i>
<em> 必须嵌入完整语境中，承担语音重音或逻辑转折功能；脱离句子就失效。
- 反问句中的质疑语气：
<p>你<em>真的</em>要删除全部数据？</p>—— 屏幕阅读器会升调读“真的”，改变句意 - 对比强调：
<p>不是<em>不能做</em>，而是<em>不该做</em></p>—— “不能”和“不该”形成语义张力 - 错误写法：
<p>支持<i>WebP</i> 和 <i>AVIF</i> 格式</p>—— 这里只是罗列术语，无语气起伏，应改用 CSS 类或<code>标签 - 正确用
<i>的场景：<p>学名：<i>Panthera leo</i></p>—— 斜体是生物学惯例，纯格式需求
<strong> 和 <em> 嵌套与样式覆盖的常见误判
嵌套本身合法，但目的不是让字“更粗”或“更斜”——那是 CSS 的事；语义叠加才有意义。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 合理嵌套：
<strong>立即<em>备份</em></strong>—— 外层强调紧迫性（重要），内层强调动作对象（语气） - 滥用嵌套：
<strong><em>警告</em></strong>—— 两层语义重叠，屏幕阅读器可能重复加重，反而模糊重点 - CSS 覆盖不影响语义：
strong { font-weight: normal; }仍被读作“重要内容”，只是视觉没加粗 - 禁止混合语义与样式：
<strong style="font-style: italic">危险操作</strong>—— 破坏结构可维护性，且font-style不该由 HTML 标签控制
邮件客户端或旧 WebView 中 <strong>/<em> 不生效怎么办
语义标签在 Outlook、部分 Android Mail 客户端中常被忽略样式，但语义本身无法降级——只能双保险补视觉。
- 优先确保语义正确，再加一层视觉保障：
<strong class="bold-text">关键步骤</strong>，CSS 中定义.bold-text { font-weight: 700; } - 不要用
<b>替代<strong>来“兼容”——这等于放弃语义，后续无障碍审计必报错 - 若目标环境 100% 不支持辅助技术（如纯内部打印模板），才考虑退回到
<b>/<i>，并加注释说明 - 真正难处理的是嵌套层级和语音合成差异：某些读屏软件对
<em>内嵌<strong>的处理不一致，建议单层优先
最容易被忽略的不是怎么写，而是删掉标签后会不会影响信息完整性——如果删了 <strong> 用户还知道“必须做”，那它就不是 <strong>；如果删了 <em> 句子语气没变，那它就不该用 <em>。
