HTML语义标签如<strong></strong>和<em></em>用于表达信息权重与逻辑重音,而非仅控制样式;<b></b>和<i></i>仅适用于无语义的视觉呈现,正确使用可提升可访问性、SEO及可维护性。

HTML格式化标签不是“样式工具”,而是语义标记手段;直接用 <b> 或 <i> 加粗/斜体,不如用 <strong> 和 <em> 表达真实意图——浏览器渲染可能一样,但屏幕阅读器、SEO 和可维护性会立刻区分高下。
什么时候该用 <strong> 而不是 <b>
当一段文字在逻辑上“必须被注意”时才用 <strong>,比如警告、关键操作提示、法律条款中的责任主体;<b> 仅用于无强调含义的视觉加粗,例如人名、产品名、关键词高亮(不带语气)。
-
<strong>请勿删除系统配置文件</strong>—— 有后果,需用户警觉 -
<b>Ubuntu 24.04</b> 默认使用 systemd—— 名词突出,无风险暗示 - 所有现代浏览器默认把两者都渲染为加粗,但搜索引擎和辅助技术会区别对待
- 若团队强制语义化,
<b>和<i>在 Lighthouse 审计中可能触发“低语义得分”警告
<em> 和 <i> 的实际分界点
<em> 表示语音重读或逻辑转折,浏览器通常斜体,屏幕阅读器会放慢语速或加重音;<i> 仅表示“非默认语体”,如外文词、术语、船名、生物分类名等。
-
<em>你真的确定要继续吗?</em>—— 暗示反问、犹豫、需要确认 -
这个函数返回 <code><i>Promise</i>对象 —— 技术术语,非强调 - 嵌套时:
<strong>最高优先级:<em>立即执行</em></strong>合理;但<b><i>...嵌套无意义,且易被 lint 工具报错
上下标、删除线、插入线这些标签的兼容性陷阱
<sup>、<sub>、<del>、<ins> 在所有主流浏览器中渲染稳定,但有两个隐形坑:
立即学习“前端免费学习笔记(深入)”;
-
<sup>和<sub>默认字体尺寸缩小、基线偏移,若混排在行内文本中(如 “H<sub>2</sub>O”),可能造成行高塌陷——建议配合 CSSline-height微调 -
<del>渲染为删除线,但不会阻止用户交互;若想禁用某段已废弃内容,得额外加aria-hidden="true"或tabindex="-1"防止键盘焦点进入 -
<ins>默认无背景色,视觉上容易被忽略;实际项目中常配合ins { background-color: #fff3cd; text-decoration: none; }提升可辨识度
别忽略 <mark> 和 <small> 的语义价值
<mark> 不是“黄色高亮笔”,而是标记文档中“与当前上下文相关”的片段,比如搜索结果中的关键词、引用中的重点句;<small> 也不是“缩小字体”,而是表示附属内容(版权、免责声明、脚注)。
<p>根据 <mark>《个人信息保护法》第23条</mark>,需单独取得同意。</p><p>本服务条款更新于 2026-09-30。<small>最终解释权归平台所有。</small></p>- 滥用
<small>控制正文字号属于语义误用,CSS 的font-size才是正确手段 - 部分旧版 IE 对
<mark>支持不一致,需确认目标环境;必要时可用<span class="highlight">+ CSS 替代
真正难的不是记住哪些标签能加粗或变斜,而是每次敲下 <b> 前,多问一句:这里需要的是“外观变化”,还是“信息权重变化”?后者决定了结构是否健壮、能否被机器理解、未来是否容易重构。



















