PHP小码农

Appearance

hgroup 标题组 ​

<hgroup> 元素用于将一个标题（h1-h6）与其相关的副标题、标语或宣传语组合在一起。它告诉浏览器和辅助技术这些标题是作为一个整体单元存在的，副标题不应该被纳入文档大纲。

前置知识

阅读本节前，建议先了解：footer 页脚

基础概念 ​

什么是 hgroup ​

<hgroup> 是 HTML5 引入后被废弃又在 HTML5.2 中恢复的元素。它的作用是将主标题和副标题/标语组合在一起，使辅助技术能够正确理解标题层级关系。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>hgroup 示例</title>
</head>
<body>
  <header>
    <!-- hgroup 将主标题和副标题组合 -->
    <hgroup>
      <h1>HTML5 语义化教程</h1>
      <p>从入门到精通的完整指南</p>
    </hgroup>
  </header>
</body>
</html>

hgroup 的历史 ​

版本状态说明
HTML5.0引入用于组合标题，影响文档大纲
HTML5.1废弃因大纲算法未被实现而废弃
HTML5.2恢复重新定义语义，不再影响大纲算法
HTML Living Standard保留当前规范中的有效元素

hgroup 的作用 ​

<hgroup> 的核心作用是排除副标题对文档大纲的影响。没有 hgroup 时，副标题（即使不是标题元素）可能会被某些工具误解为独立的标题层级。

html
<!-- 没有 hgroup：副标题可能干扰标题层级 -->
<header>
  <h1>文章标题</h1>
  <p>这是一篇副标题</p> <!-- 可能被某些工具误读 -->
</header>

<!-- 有 hgroup：副标题明确属于主标题 -->
<header>
  <hgroup>
    <h1>文章标题</h1>
    <p>这是一篇副标题</p> <!-- 明确是主标题的附属 -->
  </hgroup>
</header>

语法与使用 ​

基本语法 ​

html
<hgroup>
  <h1>主标题</h1>
  <p>副标题或标语</p>
</hgroup>

hgroup 的内容规则 ​

<hgroup> 的第一个子元素必须是 h1-h6 级别的标题元素，后续的子元素可以是：

  • <h2>-<h6> 标题元素
  • <p> 元素（作为副标题/标语）
html
<!-- 模式 1：主标题 + p 副标题（最常见） -->
<hgroup>
  <h1>主标题</h1>
  <p>副标题描述</p>
</hgroup>

<!-- 模式 2：主标题 + h2 副标题 -->
<hgroup>
  <h1>主标题</h1>
  <h2>副标题</h2>
</hgroup>

<!-- 模式 3：多个标题 -->
<hgroup>
  <h1>主标题</h1>
  <h2>二级副标题</h2>
  <h3>三级副标题</h3>
</hgroup>

hgroup 的可访问性效果 ​

<hgroup> 对辅助技术的影响：

元素不使用 hgroup使用 hgroup
h1大纲：h1大纲：h1
h2（副标题）大纲：增加一个 h2 条目大纲：不增加条目
p（副标题）可能被忽略或误读作为 h1 的描述文本

详细说明 ​

hgroup 的正确使用场景 ​

1. 文章标题 + 副标题 ​

html
<article>
  <header>
    <hgroup>
      <h1>Web 性能优化实践</h1>
      <p>从加载速度到运行时效率的全面优化策略</p>
    </hgroup>
    <p>作者：<address>张三</address> &middot; <time datetime="2024-01-15">2024-01-15</time></p>
  </header>
  <p>正文内容...</p>
</article>

2. 网站品牌 + 标语 ​

html
<header>
  <hgroup>
    <h1>TechBlog</h1>
    <p>分享前端技术，探索 Web 未来</p>
  </hgroup>
</header>

3. 章节标题 + 说明 ​

html
<section>
  <hgroup>
    <h2>性能指标</h2>
    <p>理解 Core Web Vitals 的三个核心指标</p>
  </hgroup>
  <p>详细内容...</p>
</section>

4. 书籍/报告标题 ​

html
<article>
  <header>
    <hgroup>
      <h1>2024 前端技术趋势报告</h1>
      <h2>年度行业分析与预测</h2>
      <p>由 TechResearch 团队出品</p>
    </hgroup>
  </header>
</article>

hgroup 不适用的场景 ​

html
<!-- 错误：hgroup 内只有一个标题 -->
<hgroup>
  <h1>标题</h1>
</hgroup>
<!-- 应该直接使用 h1 -->
<h1>标题</h1>

<!-- 错误：第一个子元素不是标题 -->
<hgroup>
  <p>描述文字</p>
  <h1>标题</h1>
</hgroup>
<!-- hgroup 的第一个子元素必须是 h1-h6 -->

<!-- 错误：内容不是标题/副标题关系 -->
<hgroup>
  <h1>标题</h1>
  <p>正文段落内容</p>
</hgroup>

实战示例 ​

完整的 hgroup 使用示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hgroup 完整示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; color: #333; }

    /* 网站头部 */
    .site-header {
      background: linear-gradient(135deg, #1e3a5f 0%, #2d5f8a 100%);
      color: #fff; padding: 3rem 2rem 2rem; text-align: center;
    }

    /* hgroup 样式 */
    .site-header hgroup h1 {
      font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;
    }
    .site-header hgroup p {
      font-size: 1.1rem; opacity: 0.85; font-weight: 300;
    }

    main { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }

    /* 文章卡片 */
    .article-card {
      background: #fff; padding: 2rem; border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 2rem;
    }

    /* 文章 hgroup */
    .article-card header hgroup h2 {
      font-size: 1.5rem; margin-bottom: 0.25rem; color: #1e293b;
    }
    .article-card header hgroup p {
      font-size: 0.95rem; color: #64748b; font-style: italic;
    }
    .article-meta {
      color: #94a3b8; font-size: 0.8rem; margin-top: 0.75rem;
    }
    .article-card p { line-height: 1.7; color: #475569; }

    /* 章节 hgroup */
    .content-section {
      margin: 2rem 0; padding: 1.5rem;
      background: #f8fafc; border-radius: 8px;
    }
    .content-section hgroup h3 {
      font-size: 1.2rem; color: #1e293b; margin-bottom: 0.25rem;
    }
    .content-section hgroup p {
      font-size: 0.85rem; color: #64748b; margin-bottom: 1rem;
    }

    .site-footer {
      background: #1e293b; color: #94a3b8;
      text-align: center; padding: 1rem; margin-top: 2rem;
    }
  </style>
</head>
<body>
  <!-- 网站 header + hgroup -->
  <header class="site-header">
    <hgroup>
      <h1>Frontend Weekly</h1>
      <p>每周精选前端技术文章与教程</p>
    </hgroup>
    <nav aria-label="主导航" style="margin-top: 1.5rem;">
      <a href="/" style="color:#fff;text-decoration:none;margin:0 1rem;">首页</a>
      <a href="/articles" style="color:rgba(255,255,255,0.8);text-decoration:none;margin:0 1rem;">文章</a>
      <a href="/about" style="color:rgba(255,255,255,0.8);text-decoration:none;margin:0 1rem;">关于</a>
    </nav>
  </header>

  <main>
    <!-- 文章 1 -->
    <article class="article-card">
      <header>
        <hgroup>
          <h2>深入理解 JavaScript 事件循环</h2>
          <p>从宏任务到微任务，彻底搞懂异步执行机制</p>
        </hgroup>
        <p class="article-meta">
          作者：<address style="font-style:normal">张三</address>
          &middot; <time datetime="2024-01-20">2024 年 1 月 20 日</time>
          &middot; 12 分钟阅读
        </p>
      </header>

      <p>事件循环（Event Loop）是 JavaScript 实现异步的核心机制。理解事件循环对于编写高效的非阻塞代码至关重要。</p>

      <section class="content-section">
        <hgroup>
          <h3>宏任务与微任务</h3>
          <p>理解任务队列的两种类型</p>
        </hgroup>
        <p>JavaScript 中的异步任务分为宏任务（macro task）和微任务（micro task）两种类型。</p>
      </section>

      <section class="content-section">
        <hgroup>
          <h3>执行顺序</h3>
          <p>事件循环的完整执行流程</p>
        </hgroup>
        <p>事件循环的执行顺序是：同步代码 -> 微任务队列 -> 宏任务队列。</p>
      </section>
    </article>

    <!-- 文章 2 -->
    <article class="article-card">
      <header>
        <hgroup>
          <h2>CSS Container Queries 实战指南</h2>
          <p>基于容器而非视口的响应式设计新方案</p>
        </hgroup>
        <p class="article-meta">
          作者：<address style="font-style:normal">李四</address>
          &middot; <time datetime="2024-01-18">2024 年 1 月 18 日</time>
          &middot; 10 分钟阅读
        </p>
      </header>

      <p>Container Queries 是 CSS 中备受期待的新特性，它允许组件根据其容器的尺寸而非视口大小来调整样式。</p>
    </article>
  </main>

  <footer class="site-footer">
    <p>&copy; 2024 Frontend Weekly. All rights reserved.</p>
  </footer>
</body>
</html>

注意事项 ​

常见错误 ​

  1. hgroup 只有一个子元素：hgroup 至少需要两个子元素才有意义
  2. 第一个子元素不是标题：hgroup 的第一个子元素必须是 h1-h6
  3. 用 hgroup 包裹非标题内容：hgroup 只用于标题组合
html
<!-- 错误 -->
<hgroup>
  <h1>标题</h1>
  <p>很长的正文段落...</p> <!-- 不是副标题 -->
</hgroup>

<!-- 正确 -->
<hgroup>
  <h1>标题</h1>
  <p>简短的副标题</p> <!-- 简短描述 -->
</hgroup>

最佳实践 ​

  1. 副标题保持简短：hgroup 中的副标题应简洁明了，通常一行以内
  2. 使用 CSS 区分标题层级：通过字体大小、颜色等视觉手段区分主标题和副标题
  3. 仅在需要时使用：如果有明确的标题+副标题关系才使用 hgroup
  4. 配合 header 使用：hgroup 通常出现在 header 元素内

下一节

继续学习：address 联系信息

参考链接 ​