hgroup 专用于将多个标题（h1–h6）归为一个逻辑单元，仅含标题元素；header 是内容区块的引导性容器，可包含标题、logo、导航等，二者职责不同不可混用。
hgroup 和 header 都是 HTML5 的语义化内容分组标签，但它们职责不同：hgroup 专用于标题层级归组，header 则用于包裹引导性或导航性内容。用错或混用，反而破坏结构清晰度。
hgroup 只管“标题怎么分组”
它唯一作用是把多个标题（h1–h6）打包成一个逻辑单元，让浏览器和辅助工具知道这些标题属于同一主题层次。比如主标题加副标题、标语或版本号：
- 必须只包含 h1–h6 元素，不能放段落、链接或图片
- 在文档大纲中，整个 hgroup 只算作一个标题层级（通常以其中最高级的 h1–h6 为准）
- 单独一个 h1 就别套 hgroup —— 没有“组”的必要，纯属冗余
- 常见正确写法：
<hgroup>
<h1>响应式网页设计</h1>
<h2>从布局到交互的完整实践</h2>
</hgroup>
header 是“区块开头的内容容器”
它不专属于页面顶部，而是任何内容区块（如 article、section 或整个 body）的起始区域，可包含标题、logo、搜索框、导航等引导类内容：
- 可以没有标题，也可以包含 hgroup、nav、form、img 等多种元素
- 一个页面可有多个 header，比如每个 article 都自带 header
- 如果 header 里只有单个 h1，且无其他内容，那 header 就是多余的 —— 直接用 h1 更简洁
- 典型合理结构：
<header>
<img src="logo.png" alt="公司标识">
<hgroup>
<h1>产品发布页</h1>
<h2>v2.4 版本上线</h2>
</hgroup>
<nav>...</nav>
</header>
别把两者当成“必须配套”
很多人习惯写 <header><hgroup><h1>...</h1><h2>...</h2></hgroup></header>，但这是机械套用。是否需要 header，取决于该区块开头是否有除标题外的引导信息：
立即学习“前端免费学习笔记（深入）”；
- 只有主副标题？hgroup 自足，无需外层 header
- 有 logo + 标题 + 导航？header 合理，hgroup 作为其子元素也合理
- article 里只有一行 h1？直接写 <h1>，别硬加 header 或 hgroup
- section 开头是搜索框 + h2？那就用 header 包住二者，不用 hgroup（因为没多级标题）
对 SEO 和可访问性的实际影响
搜索引擎和读屏软件依赖语义结构理解内容。hgroup 能防止副标题被误判为独立章节，避免大纲混乱；header 则帮助识别区块起点，提升导航效率：
- 错误示例：多个 h2 并列却未用 hgroup 归组 → 大纲出现多个同级二级标题，语义失真
- 错误示例：在 footer 里放 header → 违反规范（header 不允许出现在 footer 内）
- 验证建议：用 W3C Markup Validator 检查结构，或浏览器开发者工具的“无障碍树”查看解析效果
