和 优先于 与 ,因其传达语义强调而非仅视觉样式: 表示内容重要,被屏幕阅读器加重朗读、搜索引擎加权; 表示语音/逻辑强调(如反问重音);而 和 仅实现粗体/斜体,无语义。中文场景中 效果有限,推荐 或 css 类明确表达层级。

直接用 <strong></strong> 和 <em></em>,别用 <b></b> 或 <i></i> ——除非你明确只需要视觉效果,且不关心语义、SEO 或屏幕阅读器行为。
为什么 <strong></strong> 比 <b></b> 更值得优先选
浏览器渲染效果一样,但语义完全不同:<strong></strong> 告诉辅助技术“这段内容重要”,屏幕阅读器会加重语气朗读,搜索引擎也会赋予更高权重;<b></b> 只是“让它变粗”,没有额外含义。实际项目中,如果你加粗的是操作按钮文字、错误提示、关键参数名,用 <strong></strong> 才符合意图。
- 错误写法:
<p>配置项必须设为 <b>true</b></p>(<b></b>无法传达“这是强制要求”的语义) - 推荐写法:
<p>配置项必须设为 <strong>true</strong></p> - 例外场景:产品名、品牌词、技术术语(如
<b>React</b>)可用<b></b>,因其本意就是视觉区分,非强调重要性
什么时候该用 <em></em> 而不是 <i></i>
<em></em> 表示语音或逻辑上的强调,比如反问、转折、对比时的重音;<i></i> 仅表示“这段文字该斜着显示”,常见于船名、拉丁学名、外语短语等纯格式需求。
- 语义正确:
<p>你真的<em>确定</em>要删除全部数据?</p>(强调“确定”,带质疑语气) - 格式正确:
<p>该菌种学名为 <i>Escherichia coli</i>。</p>(斜体是惯例,不表达强调) - 注意:
<em></em>支持嵌套,<em>最<em>关键</em>的一环</em>会被读作两层强调,但慎用,容易让屏幕阅读器混乱
CSS 替代方案:什么时候该放弃标签,改用样式
当加粗/倾斜只是视觉设计的一部分,且需统一控制、响应式适配或配合交互状态(如 hover、focus)时,CSS 更灵活可靠。
- 用类代替标签:
<span class="highlight">高亮文本</span>+.highlight { font-weight: 700; font-style: italic; } - 避免混合语义与样式:不要写
<strong style="font-style: italic"></strong>,这既破坏语义又难维护 - 性能影响极小,但可访问性风险明显:纯 CSS 实现的“加粗”不会被屏幕阅读器识别为强调,除非额外加
aria-live或role="alert"等补救措施
容易被忽略的兼容性细节
现代浏览器对 <strong></strong> 和 <em></em> 的默认样式基本一致,但部分旧版 Android WebView 或邮件客户端(如 Outlook)可能忽略它们的语义,只按默认粗细/倾斜渲染。如果目标环境不可控,且强调效果必须 100% 可见,可双保险:
- 语义 + 样式并存:
<strong class="visually-bold">关键步骤</strong> - 不要依赖默认字体粗细:某些系统字体(如 macOS 的 San Francisco)在
font-weight: bold下变化不明显,建议显式设font-weight: 700 -
<em></em>在中文语境下效果有限——中文无重音朗读习惯,屏幕阅读器通常不特殊处理,此时更推荐用<strong></strong>或 CSS 类明确表达层级










