HTML hgroup 语法
在 HTML 中，hgroup 标签用于将一组标题（h1~h6）及其相关内容组合在一起。它主要用于为文章或章节创建更清晰的结构，并使屏幕阅读器和其他辅助技术更容易理解内容。
语法：
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>说明：
hgroup 标签内部一般包含一个 h1~h6 标题，以及一个或多个 p 标签（用于副标题、标签行或副歌）。
提示: hgroup 是 “header group（标题组）” 的缩写。
HTML hgroup 摘要
| 属于 | HTML 语义化 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML hgroup 示例
接下来，我们通过几个简单的例子来讲解一下 HTML hgroup 标签是如何使用的。
示例 1：hgroup 包含主标题与副标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<hgroup>
<h1>前端开发入门</h1>
<h2>从 HTML、CSS 到 JavaScript</h2>
</hgroup>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/tutorials">教程</a></li>
</ul>
</nav>
</header>
<main>
<article>
<hgroup>
<h1>HTML 语义化标签</h1>
<h3>构建更清晰、更可访问的网页</h3>
</hgroup>
<p>本文将深入探讨 HTML5 中引入的语义化标签。</p>
</article>
<section>
<hgroup>
<h2>最新技术动态</h2>
<h3>2025年 Web 前沿技术解读</h3>
</hgroup>
<p>探索当下最热门的 Web 技术和未来发展趋势。</p>
</section>
</main>
<footer>
<p>Copyright ©2015-2025 绿叶网 (www.lvyenet.com), All Rights Reserved</p>
</footer>
</body>
</html>页面效果如下图所示。
分析：
hgroup 标签用于将多个标题组合在一起，语义上表示它们共同构成一个单一的标题。
示例 2：hgroup 包含标题与时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<main>
<article>
<hgroup>
<h1>人工智能新突破：AI 大模型在创意写作领域取得进展</h1>
<p><time datetime="2025-05-20">2025 年 5 月 20 日</time>发布</p>
</hgroup>
<p>最新的研究表明，人工智能大模型在生成高质量创意文本方面取得了显著进步，引发了业界广泛关注。</p>
</article>
<article>
<hgroup>
<h2>全球经济展望报告</h2>
<h3>2025 年下半年宏观经济趋势分析</h3>
<p>作者：经济研究部</p>
</hgroup>
<p>这份报告详细阐述了未来几个月全球经济可能面临的挑战和机遇。</p>
</article>
</main>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，第 1 个 article 的 hgroup 包含了主标题 h1 和一个包含发布时间的 p 标签。虽然 p 标签不是标题元素，但通过 hgroup 将其与主标题关联起来，语义上表明这个时间是文章标题的补充信息。
第 2 个 article 的 hgroup 包含了主标题 h2、副标题 h3 和作者信息 p。从中也可以看出，hgroup 可以用来组合各种辅助性文本，作为主要标题的上下文。
HTML5 语义化标签
HTML5 新增了非常多结构性的语义化标签，以提高代码的可读性和利于 SEO，主要包括：
