应优先使用语义化标签<strong>和<em>表达重要性与强调，而非仅具样式功能的<b>和<i>；<ins>与<del>用于标记内容变更，非装饰；<sup>与<sub>专用于数学化学等结构化文本，不可滥用作排版技巧。

直接说结论：别从 <b> 和 <i> 开始学，先搞懂 <strong> 和 <em> 的语义差异，再动手写。

为什么不能一上来就用 <b> 和 <i>？

这两个标签只是“看起来加粗/斜体”，但浏览器和屏幕阅读器完全不知道你想表达什么。比如：<b>警告</b> 对机器来说只是“字体变粗”，而 <strong>警告</strong> 明确告诉辅助技术：“这段话很重要”。搜索引擎、无障碍工具、甚至未来浏览器的语音朗读都会依赖这个语义。

实际开发中，团队协作或接手老项目时，看到满屏 <b> 很可能意味着语义混乱，后期改起来成本高。

• <b> / <i>：适合纯样式需求，比如品牌名固定加粗、外文术语斜体（无强调意图）
• <strong> / <em>：只要你想传递“重要”或“强调”，就该用它们
• CSS 可以覆盖默认样式，所以语义和外观完全可以解耦

<ins> 和 <del> 不只是“带下划线/删除线”

它们的真实作用是标记内容变更——不是装饰，而是历史记录。比如文档修订、价格变动、政策更新等场景下，<del>¥199</del> <ins>¥149</ins> 不仅视觉可读，还能被自动化工具识别为“降价行为”，甚至用于生成变更摘要。

立即学习“前端免费学习笔记（深入）”；

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

常见错误是把 <ins> 当成普通下划线用，结果在无障碍模式下被读作“插入内容”，造成歧义。

• 不要用 <ins> 替代 <u>（后者已不推荐，应改用 CSS text-decoration: underline）
• <del> 默认有贯穿线，但若需灰色+删除线，必须加 CSS：del { color: #666; }
• 嵌套使用要谨慎：<del><strong>旧条款</strong></del> 合法，但 <strong><del>旧条款</del></strong> 逻辑上矛盾（既强调又删除）

上标 <sup> 和下标 <sub> 的典型误用

它们专为数学、化学、单位等结构化文本设计，不是排版小技巧。比如 H<sub>2</sub>O 或 x<sup>2</sup> 是正确用法；但用 <sup>TM</sup> 标商标，或 <sub>注1</sub> 做脚注编号，属于语义错配。

真正做脚注应该用 <aside> + <footer> 或 ARIA 属性，而不是靠视觉位置欺骗用户。

• 化学式、数学公式、单位符号（如 m²、CO₂）→ 用 <sub>/<sup>
• 商标、脚注序号、版本号（v2.1^beta）→ 改用 <span> + CSS 或更合适的语义标签
• 避免嵌套：<sup><sub>x</sub></sup> 浏览器支持差，且无实际语义

最容易被忽略的是：格式化标签本身不解决可访问性问题。哪怕你全用对了 <strong> 和 <em>，如果背景色和文字色对比度不足（比如浅灰字配白底），视障用户依然看不见。语义只是第一步，后续必须配合颜色、间距、焦点状态一起验证。