hgroup标签在现代html中已失效，它不会改变文档大纲、不影响屏幕阅读器行为，也不被主流浏览器或爬虫识别为语义分组；chrome、firefox、edge仍把其中的当作独立二级标题计入大纲，这是规范移除后的正常表现。
hgroup 标签在现代 HTML 中已失效
它不会改变文档大纲、不会影响屏幕阅读器行为、也不会被主流浏览器或爬虫识别为语义分组。你写了 <hgroup><h1>A</h1>
<h2>B</h2></hgroup>，Chrome、Firefox、Edge 依然会把 <h2>B</h2> 当作独立二级标题计入大纲——这不是 bug，是规范移除后的正常表现。
为什么 hgroup 被移除且不能用
HTML Living Standard 在 2016 年正式移除了 <hgroup></hgroup>，HTML5.1 起不再收录。原因很实际：
- 没有浏览器实现其“仅首标题入大纲”的语义逻辑
- 所有主流屏幕阅读器（NVDA、VoiceOver、JAWS 最新版）完全忽略它
- Lighthouse、axe 等可访问性检测工具将其视为冗余标签，甚至报“语义无效”警告
- CSS 选择器如
hgroup > h1 + h2虽能选中，但毫无语义价值，纯样式需求可用更轻量方式解决
替代方案要按真实需求选，不是套模板
别问“怎么用 hgroup”，该问“你想达成什么效果”：
- 只要视觉上主大副小 → 用
<h1>主标题</h1> <p class="subtitle">副标题</p>，纯 CSS 控制字体、颜色、间距 - 副标题不该被读屏软件朗读（比如纯装饰性标语）→ 给
<p></p>加aria-hidden="true" - 副标题有实际语义（如发布日期、作者、导语）→ 直接用
<h2></h2>或包裹进<header></header>，让它自然出现在大纲里——这才是可访问的正确做法 - SEO 或结构要求主副标题强绑定 → 用
aria-labelledby：给副标题设id="sub"，主标题加aria-labelledby="sub"，辅助技术会将其作为标题一部分朗读
删掉 hgroup 比改写它更安全
即使你看到旧教程或遗留代码里还有 <hgroup></hgroup>，也别试图“修复”它。它不参与渲染、不触发任何 JS 行为、不被任何自动化工具信任。真正容易被忽略的是：这个标签现在唯一的作用，就是增加 HTML 体积、干扰可访问性检测、误导新开发者以为“语义分组”还能靠标签解决。直接删掉，用 <header></header> 或普通容器包裹，再按需加 ARIA，才是当下最干净、最可靠的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
