html5中hgroup标签已被废弃，推荐用语义清晰方式实现多级标题：主标题用，副标题用或配合css；需隐藏副标题时加aria-hidden="true"，需纳入大纲则用；有语义价值时可用aria-labelledby显式关联；还可通过嵌套heading构建逻辑分组。

HTML5中没有合法的“组合多级标题”专用标签，hgroup 已被正式废弃，不能用于组合主副标题。现代标准推荐用语义清晰、辅助技术友好的方式实现视觉与逻辑分离。

用 heading + 普通元素控制视觉层级

主标题用

，副标题改用

或 ，再通过 CSS 控制样式和位置。这种方式语义干净，屏幕阅读器只朗读主标题，副标题可被隐藏或保留为普通文本。

• 副标题需完全不被辅助技术读取：加 aria-hidden="true"
• 副标题需参与文档大纲（如 SEO 或内容结构需要）：直接用
  ，这是更透明、更合规的做法
• 示例：
  

  <header><br>  <h1>响应式网页设计</h1>
  <br>  <p aria-hidden="true">从布局到适配的完整实践</p>
  <br></header>

用 aria-labelledby 显式关联标题与副标题

当副标题有语义价值（如版本号、作者、时间），又不想让它独立出现在大纲中时，可用 aria-labelledby 让辅助技术把副标题当作主标题的一部分朗读。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 给副标题加 id，主标题用 aria-labelledby="id1 id2" 引用两者
• 注意顺序：ID 列表顺序决定朗读顺序
• 示例：
  

  <h1 id="main-title">JavaScript 深入解析</h1><br><p id="subtitle">ES2023 新特性与运行时原理</p><br><div aria-labelledby="main-title subtitle" role="heading" aria-level="1"></div>

  （实际中常配合隐藏的 heading 元素使用）

用 section + 嵌套 heading 构建逻辑分组

每个

或

可拥有自己的标题层级，避免全局混乱。主标题用

，区块内用

，子模块用

，依此类推。

• 每个 <section></section> 应包含至少一个 heading 元素（h1–h6）
• 不要跳级，比如

  后直接用

• 示例：
  

  <section><br>  <h2>CSS Grid 布局</h2>
  <br>  <p>二维网格系统入门指南</p>
  <br></section>

避免常见错误

别再用

——它在 HTML5.2 起已被 W3C 和 WHATWG 移除，浏览器不赋予其任何语义，构建工具会报错，SEO 工具可能降分。

• 它不会屏蔽副标题的大纲出现，也不会合并朗读
• React/TypeScript 项目中需额外声明类型，增加维护成本
• 所有现代浏览器将其视为普通 <div>，无实际作用 </div>

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