<hgroup> 标签已从 HTML5.2 起被 W3C 和 WHATWG 彻底删除，现代浏览器将其视为普通容器，不参与大纲计算、不影响可访问性与 SEO；主副标题应通过 <h1> + <p class="subtitle"> 或 <header> 等语义化方式实现。

标签曾被设计用来把主标题和副标题（比如 `

` 和 `

`）逻辑上归为一个标题单元，让浏览器或辅助技术理解“它们是一体的”，而不是两个独立的章节起点。它的初衷是解决多级标题并列时破坏文档大纲结构的问题——例如 `

前端开发指南

从零开始构建现代 Web 应用

` 被误判为两个层级，而 `

` 想表达的是：后者只是前者的补充说明，不开启新节。

但这个标签现在已经失效。

HTML5.2 起，W3C 和 WHATWG 同步将其从规范中彻底删除。所有现代浏览器（Chrome、Firefox、Safari、Edge）都把它当作普通容器处理——它不参与文档大纲计算，不影响屏幕阅读器朗读逻辑，也不改变 SEO 中标题的权重或结构化数据提取。你写 <hgroup><h1>A</h1><h2>B</h2></hgroup>，结果就是两个独立标题：<h1> 和 <h2> 都照常计入大纲，B 仍会被读出、仍可能被搜索引擎索引为二级内容。

真正起作用的不是 hgroup，而是你写的 heading 元素本身。很多人误以为套个 <hgroup> 就能“隐藏”副标题的语义，其实完全不能。Lighthouse、axe、Google Search Console 等工具全都无视 <hgroup> 的存在，只认 <h1>–<h6> 的实际层级。

现在怎么组合主副标题？

视觉排版和语义结构要分开处理：

• 主标题用 <h1>（或对应上下文中的正确层级）
• 副标题改用 <p class="subtitle"> 或 <span>，再用 CSS 控制样式（字号、颜色、间距等）
• 如果副标题需要被辅助技术识别为对主标题的补充，可给 <h1> 加 aria-labelledby，指向副标题的 id
• 若需语义分组容器，用 <header> —— 它有明确的 ARIA role 和大纲边界，比 <hgroup> 更可靠

为什么不该再用 hgroup？

- TypeScript + JSX 项目里会报类型错误，需手动扩展接口，无实际收益 - HTML Lint 工具（如 html-validate）默认警告它是废弃标签 - SEO 和可访问性审计工具会因检测到过时标签降低评分 - CMS 或旧模板可能还在输出 `

`，但必须主动替换，不能留着

迁移老代码的小建议

搜索匹配模式： - `

(.*?)

(.*?)

` → 替换为 `

$1

$2

` - `

(.*?)

(.*?)

` → 直接去掉 `

`，保留 `

` 和 `

` - 别为了统一 margin/padding 而用 `

` 当样式容器，纯 CSS 选择器或 `

` 更清晰

不复杂但容易忽略：写了 <hgroup> 并不等于解决了语义问题，反而可能掩盖真实的大纲缺陷。