怎么通过HTML5中Hgroup标签对副标题进行逻辑分组并提升文档层级质量-H5教程-PHP中文网

hgroup 标签已从 html5 中移除，自 2013 年起被 whatwg 废弃，w3c 在 html5.2 中同步废弃；主流浏览器仅作普通容器处理，不提供语义、seo 或无障碍支持。

怎么通过html5中hgroup标签对副标题进行逻辑分组并提升文档层级质量

hgroup 标签已不再可用

HTML5 中没有 hgroup 标签。它曾是早期草案中的实验性元素，用于组合主标题与副标题，但早在 2013 年就被 WHATWG 正式移除，HTML5.2 起 W3C 也同步废弃。当前所有主流浏览器（Chrome、Firefox、Safari、Edge）均不解析其语义，仅当作普通容器处理——它对文档大纲、SEO、屏幕阅读器行为完全无影响。

为什么不能靠 hgroup 提升层级质量

写了 <hgroup><h1>A</h1> <h2>B</h2></hgroup>，B 依然计入文档大纲，仍会被朗读、索引、显示在 Lighthouse 报告中
无障碍支持为零：主流屏幕阅读器（NVDA、VoiceOver、JAWS 新版本）完全忽略 <hgroup></hgroup>
构建工具（如 html-validate、ESLint-plugin-jsx-a11y）默认报错；TypeScript + React 项目中会触发 JSX 类型错误
视觉样式和语义被强行耦合，反而增加维护负担

真正有效提升文档层级质量的做法

用 heading 级别本身表达结构：<h1></h1> 表示页面主标题，<h2></h2> 表示章节，<h3></h3> 表示小节——这是 HTML Living Standard 明确推荐的、唯一可靠的层级机制
副标题不用 heading 标签：改用 <p class="subtitle"></p> 或 <span></span>，配合 CSS 控制视觉（字号、颜色、间距），语义上不干扰大纲
需要语义分组时，用
：它自带明确的 ARIA role 和节边界语义，包裹 <h1></h1> 与辅助文本更自然、更兼容
若副标题需参与语义（如文章导语），直接用 <h2></h2> —— 坦然接受它成为大纲一部分，比假装“隐藏”更透明、更可访问

一个干净实用的写法示例

复制以下代码即可直接使用：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<header><h1>JavaScript 深入解析</h1>
  <p class="subtitle">ES2023 新特性与运行时原理</p>
</header>

再加一行 CSS 就能控制副标题样式：

.subtitle {
  font-size: 0.8em;
  color: #666;
  margin-top: 0.2em;
  font-weight: normal;
}

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