html中hgroup标签_html5标题组合标签用法说明-html教程-PHP中文网

hgroup 标签在现代 html 中已废弃，不该再用；html5 曾引入它解决多级标题语义问题，但 html5.2 起被 w3c 和 whatwg 正式移除，浏览器仅作普通容器解析，无语义或 aria 行为。

html中hgroup标签_html5标题组合标签用法说明

hgroup 标签在现代 HTML 中已废弃，不该再用

HTML5 最初引入 <hgroup></hgroup> 是为解决多级标题（如主标题 + 副标题）被屏幕阅读器重复朗读、影响语义结构的问题。但该标签在 HTML5.2 草案中被正式移除，W3C 和 WHATWG 均不再推荐使用。所有主流浏览器虽仍能解析它（不报错），但不会赋予其任何特殊语义或 ARIA 行为——它本质上就是个无意义的 <div>。 <h3>替代方案：用 heading 元素 + CSS 或 aria-label 控制语义</h3> <p>真实需求其实是「视觉上分层显示，语义上只暴露主标题」。比如页面顶部写着「JavaScript 深入解析」（主标题）和「ES2023 新特性与运行时原理」（副标题）。这时应：</p> <ul> <li>只用一个 <code><h1></h1> 包裹主标题文字，副标题改用 <p></p> 或 <span></span>，并通过 CSS 视觉对齐

若需让辅助技术跳过副标题，给副标题容器加 aria-hidden="true"

若必须保留副标题语义（如 SEO 或文档大纲需要），直接用 <h2></h2>，并接受它出现在大纲中——这反而是更透明、更可访问的做法

示例：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

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

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

开发者看到「组合标题」字面意思，就以为它能“合并”多个 <h1>–<h6></h6> </h1> 的语义层级。结果导致：

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

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

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

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

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