<hgroup> 已被 HTML5.2 正式废弃,不再影响文档大纲,主流浏览器均不支持其语义化作用;应改用 <h1> + <p class="subtitle"> 等非 heading 标签配合 CSS 实现视觉效果。

<hgroup> 已被移除,别再用了
HTML5 最初草案里确实定义过 <hgroup>,用来把主标题和副标题包在一起,避免副标题影响文档大纲。但它在 HTML5.2 中已被正式废弃,所有主流浏览器都不再支持语义化作用,也不影响 <h1>–<h6> 的层级计算。现在用它,只是多写一对无意义的标签。
替代方案:用普通 heading + CSS 控制视觉
如果你只是想让副标题看起来小一点、灰一点、不参与大纲,直接用 <h1> 和 <p>(或 <span>)组合,再靠 CSS 控制样式即可:
<header> <h1>我的博客</h1> <p class="subtitle">每天写点代码和思考</p> </header>
关键点:
-
class="subtitle"是纯视觉标记,不影响语义或大纲 - 不要用
<h2>当副标题——它会创建新大纲节点,可能破坏 SEO 和屏幕阅读器逻辑 - 如果真需要语义分组(比如文章页的标题+导语),
<header>或<section>更合适
为什么 <hgroup> 被砍掉?
根本原因在于它没解决实际问题,反而增加了复杂性:
立即学习“前端免费学习笔记(深入)”;
- 浏览器实现不一致:Chrome 曾短暂支持,Firefox 和 Safari 基本忽略
- 开发者误用严重:有人把它当“标题容器”嵌套多个
<h1>,导致大纲混乱 - 无障碍效果差:多数屏幕阅读器不识别
<hgroup>的“降级”语义,仍会朗读所有子 heading - CSS 选择器难写:
hgroup > h1 + h2这类规则既脆弱又没必要
现在该怎么做?记住这三条
面对标题组合需求,优先按这个顺序判断:
- 是否需要语义分组?→ 用
<header>包裹<h1>和辅助文本 - 是否要隐藏副标题对大纲的影响?→ 别用 heading 标签,改用
<p>、<div>或<span> - 是否在写遗留系统或老文档?→ 查清目标环境是否真有兼容要求;绝大多数现代项目可安全忽略
<hgroup>
真正容易被忽略的是:即使你写了 <hgroup><h1>A</h1><h2>B</h2></hgroup>,现在的 Chrome/Firefox/Edge 依然会把 <h2> 当作独立二级标题计入大纲——它已经完全失效了。











