hgroup标签在现代HTML中已彻底废弃，不推荐使用；它不影响文档大纲、不改变屏幕阅读器行为、不提升SEO，仅增加冗余和维护成本。

hgroup 标签在现代 HTML 中已彻底失效，不推荐、也不应再使用——它不会影响文档大纲，不改变屏幕阅读器行为，不提升 SEO，只增加冗余和维护成本。

为什么 hgroup 在现代浏览器里“看起来能用”但实际没用

主流浏览器（Chrome、Firefox、Safari、Edge）至今仍能解析 hgroup 标签而不报错，但它已被 W3C 和 WHATWG 从 HTML5.2 规范中正式移除。这意味着：

• 它不再参与文档大纲（outline）计算：

  A

  B

  中的
  依然会被视为独立二级标题，出现在 Lighthouse 的结构化数据报告或 axe 的可访问性检查中
• 屏幕阅读器（如 NVDA、VoiceOver）完全忽略 hgroup 的语义意图，仍会分别朗读
  和

• 构建工具（如 html-validate、eslint-plugin-jsx-a11y）默认触发警告，提示 “hgroup is deprecated”
• 在 TypeScript + JSX 环境中，hgroup 不是标准 React 元素类型，需手动扩展 JSX.IntrinsicElements，否则编译报错

替代 hgroup 的真实可行方案

别试图“修复” hgroup，直接换掉。根据你要解决的具体问题选：

• 只要视觉上区分主副标题（比如副标题字号小、颜色浅）：用
  +
  ，纯 CSS 控制样式，语义干净，大纲清晰
• 需要语义分组（如文章页的标题+导语+作者信息）：用
  包裹
  、
  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载
  、 等，
  是规范支持的语义容器
• 必须让辅助技术把副标题当“附属说明”而非独立标题：给副标题加 aria-hidden="true"（仅当它纯属装饰性文本时），或用 aria-labelledby 显式绑定到主标题
• SEO 场景下想避免副标题被单独索引：确保副标题不用
  –
  ，改用
  或

  ，搜索引擎不会将其识别为标题层级

  哪些项目还可能“不得不”保留 hgroup

  极少数情况需容忍它存在，但前提是明确知道代价：

  • 维护一个 2012 年前启动、且未升级构建链路的遗留系统，且该系统依赖某款老版本 CMS 输出含 hgroup 的模板
  • 对接某家已停更的政府旧平台接口，其 XML/HTML 响应体硬编码了 hgroup，且无权限修改后端
  • 做浏览器兼容性考古测试，比如验证 IE9 对早期 HTML5 草案的实现边界

  除此之外，所有新项目、重构项目、组件库、SSR 模板，都该直接删掉 hgroup —— 它不是“还能凑合”，而是“写了等于白写，还埋雷”。

  真正容易被忽略的是：即使你今天在 Chrome DevTools 里看到 hgroup 没报错、DOM 渲染正常，它也早已不是语义节点。它的存在本身，就是对可访问性和长期维护性的轻微腐蚀。

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