HTML hgroup标签的语义化作用？多级标题分组的最新规范-html教程-PHP中文网

hgroup 已被 html5.2 正式移除，无语义化作用；它不再影响文档大纲、无障碍树、seo 权重或 dom 结构，浏览器仅解析而不赋予任何特殊行为。

html hgroup标签的语义化作用？多级标题分组的最新规范

hgroup 已被 HTML5.2 正式移除，无语义化作用

<hgroup></hgroup> 在 2017 年发布的 HTML5.2 规范中被彻底删除，WHATWG 的 HTML Living Standard（现行标准）也不再定义其任何语义、大纲行为或无障碍角色。它不再影响文档大纲、document.body.children 结构、屏幕阅读器的 AX Tree，也不会改变 SEO 中标题权重的计算逻辑。主流浏览器（Chrome、Firefox、Safari、Edge）虽仍能解析该标签而不报错，但会完全忽略其存在——它和写一个自定义的 <xyz></xyz> 标签效果一致。

为什么曾经想用 hgroup？现在为什么不能用？

当初设计 <hgroup></hgroup> 是为解决一个真实痛点：主标题 + 副标题（如 <h1>Vue.js</h1> <h2>The Progressive JavaScript Framework</h2>）被错误计入大纲层级，导致辅助技术读出两个独立标题节点。但实践暴露了根本矛盾：

开发者滥用严重：用 <hgroup></hgroup> 包裹 <h1></h1>+<h2></h2>+<h3></h3>+图标+时间戳，语义混乱
屏幕阅读器支持不一致：NVDA 有时跳过整个 <hgroup></hgroup>，VoiceOver 可能只读 <h1></h1>，JAWS 行为又不同
它没真正解决问题：大纲算法依赖标题元素的嵌套与顺序，<hgroup></hgroup> 只是视觉包裹，无法声明“这个 <h2></h2> 不参与层级计算”

多级标题分组的现代写法（2026 年推荐）

核心原则是：分离语义结构与视觉呈现。副标题不是标题，就不该用 <h2></h2>–<h6></h6>。

主标题用 <h1></h1>（或对应节内的正确层级），副标题/标语用 <p class="subtitle"></p> 或 <span></span>
若需让辅助技术将副标题作为主标题的补充说明，给 <h1></h1> 加 aria-labelledby 属性，值为副标题的 id
用 CSS 控制视觉样式（字号、行高、颜色、间距），不依赖标签嵌套

示例：

稿定AI

一款融合AI图像生成与智能编辑能力的在线设计工具，可辅助完成图片重绘、线稿处理和人物视觉优化等创作任务。

下载

<h1 id="main-title">React</h1>
<p id="subtitle" class="subtitle">A JavaScript library for building user interfaces</p>
<section aria-labelledby="main-title subtitle"><p>Declarative, efficient, and flexible.</p>
</section>

检查和迁移老项目中的 hgroup

如果你维护的是 2016 年前的老代码，搜索并替换所有 <hgroup></hgroup> 模式：

匹配 <hgroup><h1>.*?</h1> <h2>.*?</h2></hgroup> → 改为 <h1>...</h1> <p class="subtitle">...</p>
避免把 <hgroup></hgroup> 当作 CSS 容器使用（比如为了 margin/padding 统一控制）——纯 CSS 选择器或 wrapper <div> 更安全、更明确 <li>特别注意 CMS 输出或旧模板引擎生成的 HTML，它们可能仍在注入 <code><hgroup></hgroup>

真正容易被忽略的点是：即使页面看起来“没坏”，<hgroup></hgroup> 也会悄悄污染无障碍树结构，且在新版本浏览器中行为不可预测；它的移除不是“建议”，而是规范已明确定义的废弃事实。