HTML <b><i><u><s>标签存废及CSS替代可行性技术问询

<b>、<i>、<u>和<s>标签仅具有“视觉”属性，不传达明确的核心语义信息。比如下面这段代码示例：

I've <em>already</em> told you <em>four</em> times
that I do <em>not</em> like <i>The Lord of the Rings</i> movie.
Please, stop.

不过，这些标签并未被正式废弃，在主流前端文档平台上甚至未被标记为“不推荐使用”。

例如，W3Schools的一则说明如下：

根据HTML5规范，<b>标签应作为其他更合适标签均不适用时的最后选择。规范指出，标题应使用<h1>至<h6>标签，强调文本应使用<em>标签，重要文本应使用<strong>标签，标记/高亮文本应使用<mark>标签。

你也可以使用以下CSS设置粗体文本："font-weight: bold;"。

可见，尽管相关文档在一定程度上不鼓励滥用<b>标签，但并未说明其未被废弃的原因。

据此，提出以下技术问题：

• 为何这些标签未被废弃？
• 为更好遵循“内容与表现分离”的理念，是否应使用CSS替代这些标签？
• 换而言之，CSS的font-weight: bold是否能完全替代<b>标签？（<i>、<u>、<s>标签同理）

问题解答 #

1. 为何这些标签未被废弃？

HTML5保留这些标签核心有两个原因：

• 兼容性刚需：大量旧网站依赖这些标签实现基础视觉效果，如果直接废弃，会导致海量现有页面显示异常，维护成本不可承受。
• 存在合理使用场景：HTML5重新定义了这些标签的弱语义定位，并非完全无意义：
  • <b>：用于吸引注意力但无需强调重要性的文本，比如摘要关键词、评论区用户名；
  • <i>：用于区分语态/语气的文本，比如外文词汇、技术术语、虚构角色对话；
  • <u>：用于标注拼写错误、中文专有名词的非链接下划线；
  • <s>：用于表示失效信息，比如过期价格、已取消活动。
    这些场景下没有更精准的语义标签，保留它们能让开发者在无需冗余CSS的前提下，快速实现规范的视觉+弱语义效果。

2. 是否应使用CSS替代这些标签以遵循“内容与表现分离”？

分场景判断：

• 如果只是单纯需要视觉效果（比如随意加粗一段文字），用CSS更符合“内容与表现分离”——HTML负责描述内容属性，CSS负责控制展示样式。
• 如果对应上述弱语义场景，直接用<b>/<i>等标签更合适：这些标签已被赋予特定弱语义，浏览器、屏幕阅读器等辅助工具能识别并做对应处理，比单纯加CSS类更简洁且符合规范。

3. CSS的font-weight: bold能否完全替代<b>标签？

不能，核心差异在两点：

• 语义层面：<b>在HTML5中有弱语义，辅助技术会识别并可能以特定方式处理（比如轻微强调）；而单纯CSS样式无任何语义，辅助工具只会将其视为普通文本。
• 开发效率：如果只是需要默认样式的加粗效果，用<b>比写<span style="font-weight: bold">或定义CSS类更高效，尤其在快速原型开发、简单文本标注场景下。
  同理，<i>对应font-style: italic、<u>对应text-decoration: underline、<s>对应text-decoration: line-through，都存在“语义+简洁性”的差异，无法被CSS完全替代。

内容的提问来源于stack exchange，提问作者user21007683