hgroup 标签在现代 HTML 中已废弃，不该再用；HTML5 曾引入它解决多级标题语义问题，但 HTML5.2 起被 W3C 和 WHATWG 正式移除，浏览器仅作普通容器解析，无语义或 ARIA 行为。
hgroup 标签在现代 HTML 中已废弃，不该再用
HTML5 最初引入 <hgroup> 是为解决多级标题（如主标题 + 副标题）被屏幕阅读器重复朗读、影响语义结构的问题。但该标签在 HTML5.2 草案中被正式移除，W3C 和 WHATWG 均不再推荐使用。所有主流浏览器虽仍能解析它（不报错），但不会赋予其任何特殊语义或 ARIA 行为——它本质上就是个无意义的 <div>。
替代方案：用 heading 元素 + CSS 或 aria-label 控制语义
真实需求其实是「视觉上分层显示，语义上只暴露主标题」。比如页面顶部写着「JavaScript 深入解析」（主标题）和「ES2023 新特性与运行时原理」（副标题）。这时应：
- 只用一个
<h1>包裹主标题文字，副标题改用<p>或<span>，并通过 CSS 视觉对齐 - 若需让辅助技术跳过副标题，给副标题容器加
aria-hidden="true" - 若必须保留副标题语义（如 SEO 或文档大纲需要），直接用
<h2>，并接受它出现在大纲中——这反而是更透明、更可访问的做法
示例：
<header> <h1>JavaScript 深入解析</h1> <p aria-hidden="true">ES2023 新特性与运行时原理</p> </header>
为什么曾经有人误用 hgroup？常见错误现象
开发者看到「组合标题」字面意思，就以为它能“合并”多个 <h1>–<h6> 的语义层级。结果导致：
- 用
<hgroup><h1>A</h1><h2>B</h2></hgroup>后，大纲工具（如 axe 或浏览器扩展）仍把 B 当作独立二级标题，<hgroup>并未屏蔽它 - 部分旧版屏幕阅读器（如 JAWS 14）曾尝试支持
<hgroup>，但行为不一致；新版本已完全忽略 - 构建工具（如 html-validate）默认会警告
<hgroup>是过时标签
兼容性与构建链路中的实际影响
虽然浏览器不报错，但问题出在更下游：
立即学习“前端免费学习笔记（深入）”；
- SEO 工具（如 Lighthouse、SE Ranking）可能因检测到废弃标签而降低可访问性评分
- 静态站点生成器（如 Hugo、Astro）的 HTML lint 插件默认禁用
<hgroup> - 若项目启用 TypeScript + JSX（如 React），JSX 编译器会把
<hgroup>当作未知元素，需额外声明类型，徒增维护成本
真正要小心的不是「能不能写」，而是「写了之后谁还当它是有效的语义节点」——答案是：没人。
