hgroup 已被 HTML5.2 正式移除，现代浏览器将其视为普通容器，不参与大纲计算；替代方案为用 + 或 包裹，语义更清晰、可访问性更好。

hgroup 已被正式废弃，现在写它没任何语义效果

HTML5.2 起，hgroup 就被 W3C 和 WHATWG 同步移除，不是“不推荐”，是规范里直接删了。所有现代浏览器（Chrome、Firefox、Safari、Edge）都把它当普通容器解析——既不参与文档大纲计算，也不影响屏幕阅读器行为，aria-hidden 或 role="group" 也不会自动附加。你写了

A

B

，结果就是两个独立标题：h1 和 h2 都照常计入大纲，副标题 B 仍会被朗读、仍会出现在 SEO 结构化数据里。

为什么曾经想用 hgroup？现在替代方案更干净

当初设计 hgroup 是为解决一个具体问题：主标题 + 副标题组合时，h2 被误判为新章节起点，破坏语义层级。但实践发现它根本没起效：

• 浏览器实现割裂：Chrome 曾短暂支持，Firefox/Safari 基本忽略
• 开发者滥用严重：有人嵌套多个 h1 进去，反而让大纲更乱
• 无障碍失效：绝大多数屏幕阅读器根本不识别它的“降级”意图

现在更直接的做法是：

• 视觉排版用

  主标题

  副标题

  + CSS 控制字号/颜色/间距
• 需要语义分组时，用
  包裹，它本身就有明确的 ARIA role 和大纲边界
• 若副标题需保留一定语义（如文章导语），直接用
  —— 接受它成为大纲一部分，这比假装“隐藏”更透明、更可访问

React / TypeScript 项目里写 hgroup 会报错或警告

JSX 编译器（如 TypeScript + @types/react）默认不认 hgroup，因为 HTML Living Standard 已将其剔除。你硬写：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

<hgroup><h1>Dashboard</h1>
  <h2>Real-time analytics</h2>
</hgroup>

会触发类型错误：JSX element type 'hgroup' does not exist in type 'JSX.IntrinsicElements'。要绕过就得手动扩展 JSX 全局接口，徒增维护负担，且毫无实际收益。

真正容易被忽略的点：hgroup 不影响大纲，但你写的 h2 依然算数

很多人以为只要套个 hgroup，里面的 h2 就不会被当二级标题处理。错。现在的 Chrome DevTools 的「Accessibility」面板、Lighthouse 的 SEO 审计、甚至 Google Search Console 的结构化数据测试工具，全都不买账。你写的 h2 依然会出现在文档大纲中，依然可能被搜索引擎当作独立章节索引。别依赖已删除的机制去掩盖语义设计缺陷——要么用非 heading 标签承载副标题，要么坦然接受 h2 的语义角色。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！