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

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

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

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

HTML5 最初引入

是为解决多级标题（如主标题 + 副标题）被屏幕阅读器重复朗读、影响语义结构的问题。但该标签在 HTML5.2 草案中被正式移除，W3C 和 WHATWG 均不再推荐使用。所有主流浏览器虽仍能解析它（不报错），但不会赋予其任何特殊语义或 ARIA 行为——它本质上就是个无意义的

。替代方案：用 heading 元素 + CSS 或 aria-label 控制语义
真实需求其实是「视觉上分层显示，语义上只暴露主标题」。比如页面顶部写着「JavaScript 深入解析」（主标题）和「ES2023 新特性与运行时原理」（副标题）。这时应：

只用一个  包裹主标题文字，副标题改用  或 ，并通过 CSS 视觉对齐
若需让辅助技术跳过副标题，给副标题容器加 aria-hidden="true"

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

示例：

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										
<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 编译器会把  当作未知元素，需额外声明类型，徒增维护成本

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

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