替代方案：用 heading 元素 + CSS 或 aria-label 控制语义

真实需求其实是「视觉上分层显示，语义上只暴露主标题」。比如页面顶部写着「JavaScript 深入解析」（主标题）和「ES2023 新特性与运行时原理」（副标题）。这时应：

• 只用一个

  包裹主标题文字，副标题改用

  或 ，并通过 CSS 视觉对齐

• 若需让辅助技术跳过副标题，给副标题容器加 aria-hidden="true"
• 若必须保留副标题语义（如 SEO 或文档大纲需要），直接用

  ，并接受它出现在大纲中——这反而是更透明、更可访问的做法

示例：

<header>
  <h1>JavaScript 深入解析</h1>
  <p aria-hidden="true">ES2023 新特性与运行时原理</p>
</header>

为什么曾经有人误用 hgroup？常见错误现象

开发者看到「组合标题」字面意思，就以为它能“合并”多个

–

的语义层级。结果导致：

• 用

  A

  B

  后，大纲工具（如 axe 或浏览器扩展）仍把 B 当作独立二级标题，
  并未屏蔽它
• 部分旧版屏幕阅读器（如 JAWS 14）曾尝试支持
  ，但行为不一致；新版本已完全忽略
• 构建工具（如 html-validate）默认会警告
  是过时标签

兼容性与构建链路中的实际影响

虽然浏览器不报错，但问题出在更下游：

• SEO 工具（如 Lighthouse、SE Ranking）可能因检测到废弃标签而降低可访问性评分
• 静态站点生成器（如 Hugo、Astro）的 HTML lint 插件默认禁用
• 若项目启用 TypeScript + JSX（如 React），JSX 编译器会把
  当作未知元素，需额外声明类型，徒增维护成本

真正要小心的不是「能不能写」，而是「写了之后谁还当它是有效的语义节点」——答案是：没人。

好了，本文到此结束，带大家了解了《hgroup标签在HTML5中的使用详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问