hgroup 已被 html5.2 正式移除，不再具有语义或大纲作用；其设计初衷是解决主副标题的大纲误判问题，但因滥用、辅助技术支持不一致且未真正解决问题而被废弃，现应改用 heading 元素配合 aria-labelledby 或纯 css 实现视觉与语义分离。
hgroup 已被 HTML5.2 正式移除，不要在新项目中使用
HTML 标准组织（WHATWG）早在 2016 年就将 <hgroup></hgroup> 标记从规范中删除，HTML5.2（2017 年发布）和后续所有版本（包括现行 HTML Living Standard）均不再定义其语义或行为。主流浏览器虽仍能解析该标签（不报错、不崩溃），但完全忽略其语义作用——它不会影响文档大纲、无障碍树（AX Tree）、SEO 权重分配，也不会改变任何标题层级逻辑。
为什么 hgroup 被废弃？核心矛盾在“视觉分组”和“语义结构”的混淆
当初设计 <hgroup></hgroup> 是为解决一个常见排版需求：主标题 + 副标题（如 <h1>React</h1>
<h2>A JavaScript library for building user interfaces</h2>）被错误计入大纲层级。但实践发现：
- 开发者滥用严重：用
<hgroup></hgroup>包裹<h1></h1>+<h2></h2>+<h3></h3>甚至图标、时间戳，破坏语义清晰性 - 屏幕阅读器实现不一致：部分读出全部子标题，部分只读
<h1></h1>，部分跳过整个<hgroup></hgroup> - 无法解决根本问题：大纲算法依赖标题元素的嵌套与顺序，
<hgroup></hgroup>只是包裹，并未提供“副标题不参与层级计算”的明确机制
替代方案：用 heading 元素 + aria-labelledby 或纯 CSS 实现相同效果
现代写法应分离语义结构与视觉呈现：
- 主标题用
<h1></h1>，副标题用<p class="subtitle"></p>或<span></span>，再通过 CSS 控制样式（字体大小、颜色、间距） - 若需让辅助技术将副标题作为主标题的补充说明，给主标题加
aria-labelledby属性，指向副标题的id（注意：仅当副标题确实属于该标题的描述性文本时才适用） - 避免用
<h2></h2>到<h6></h6>写副标题——这会强行插入一个大纲节点，干扰内容层级
<h1 id="main-title">Vue.js</h1> <p id="subtitle" class="subtitle">The Progressive JavaScript Framework</p> <!-- 辅助技术可将 subtitle 作为 main-title 的附加说明 --> <section aria-labelledby="main-title subtitle"><p>Core features include reactive data binding...</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </section>
检查现有代码是否误用了 hgroup
如果你维护的是老项目，搜索以下模式并替换：
-
<hgroup><h1>...</h1> <h2>...</h2></hgroup>→ 改为<h1>...</h1> <p class="subtitle">...</p> -
<hgroup><h2>...</h2> <h3>...</h3></hgroup>→ 直接删掉<hgroup></hgroup>，保留两个标题（它们本就应各自参与大纲） - 用 Lighthouse 或 axe DevTools 检查“document outline”，确认没有因
<hgroup></hgroup>导致大纲意外扁平化或断裂
真正容易被忽略的是：即使页面看起来没坏，<hgroup></hgroup> 也在悄悄削弱可访问性和 SEO 稳定性——它不报错，所以没人修；但它也不起作用，所以修了也没人知道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
