header是语义化头部区块，可含标题、导航等；hgroup专用于归组主副标题（仅h1–h6），两者应按场景合理组合使用，避免冗余或误用。
header 和 hgroup 都用于组织页面头部内容，但职责不同：header 是语义化的“头部区块”，可包含标题、导航、logo、时间等；hgroup 专用于“多级标题归组”，只包裹 h1–h6，且仅在存在主副标题关系时才需要。
header 的适用场景
header 表示一个内容区块的引导性区域，不限于页面顶部，也不限于只有一个标题。它强调的是“一组介绍性或导航性内容”。
- 页面整体页眉：含 logo、主导航、搜索框、用户登录入口
- 文章区块头部：含标题 + 发布时间 + 作者信息 + 分类标签
- 侧边栏模块头部：如“热门推荐”标题 + 小图标 + “查看更多”链接
- 注意：若 header 内只含一个 h1（无其他辅助内容），建议直接用 h1，省略 header —— 语义冗余，增加无谓嵌套
hgroup 的适用场景
hgroup 的唯一作用是把多个层级的标题（如主标题 + 副标题）逻辑上绑定为一个标题单元，在文档大纲中合并为一级条目。
- 典型组合：h1（主标题）+ h2（副标题/标语），例如《前端开发指南》+《从零开始构建现代 Web 应用》
- 多级标题并列时（如 h1 + h2 + h3），仍可用 hgroup，但需确保它们共同构成同一标题语义单元
- 关键限制：hgroup 内只能包含 h1–h6 元素，不能放 p、time、img 等；否则破坏语义规范
- 若只有一个标题（比如只有 h1），绝对不要用 hgroup —— 它不提供额外语义，反而误导解析器
两者组合使用的合理方式
当一个区块头部既有主副标题，又有其他辅助信息（如日期、作者、操作按钮），才需要 header 包裹 hgroup + 其他元素。
- 正确写法：
<header><hgroup><h1>响应式设计</h1> <h2>适配所有设备的布局策略</h2></hgroup><time datetime="2026-06-15">2026年6月15日</time></header> - 错误写法：单独用
<header><h1>标题</h1></header>或<hgroup><h1>标题</h1> <p>说明文字</p></hgroup> - 更简洁的情况：若只有 h1 + h2，没其他内容，直接
<hgroup><h1>...</h1> <h2>...</h2></hgroup>即可，无需外层 header
常见误用与规避建议
滥用这两个标签会削弱 HTML 的语义表达力，也影响可访问性和 SEO 解析效果。
- 避免给每个 h1 都套一层 header：不是所有标题都需要“头部区块”语义
- 避免在 hgroup 中混入非标题元素：如图片、段落、按钮——这违反 HTML5 规范定义
- 避免嵌套 header：header 不允许作为另一个 header 的子元素
- 注意浏览器兼容性：hgroup 在部分旧版屏幕阅读器中支持有限，若需强兼容，可辅以 aria-label 明确标题含义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
