<header>是语义容器而非视觉定位标签，必须包裹显式标题（h1–h6）以表明引导性内容：整站页眉含h1及导航，文章页眉用h2级标题聚合元数据，section页眉用于带标题的逻辑分段，纯样式或无标题使用属误用。

<header> 标签不是“页面最上面那条横条”的代名词，而是语义容器——它只在包裹真正承担「引导性内容」时才该出现。关键不在位置，而在内容是否构成某个区块的头部上下文。

页眉级 <header>（整站或区域）必须含显式标题
这是页面或站点层面的引导入口，需明确回答“这是谁的页面、主题是什么”：

• 必须包含且仅有一个 <h1> 到 <h6>，不能藏在 <div> 或 <nav> 里
• 推荐用 <h1> 表示站点名，如 <h1>我的博客</h1>
• 可同时包含 logo（带 alt）、主导航 <nav>、搜索表单 <form role="search">
• 错误示例：<header><nav>...</nav></header>（无标题 → 辅助技术无法识别上下文）

文章级 <header>（嵌在 <article> 内）用于元数据聚合
它属于内容块自身的头部信息，与整站页眉完全独立，互不干扰：

• 用 <h2> 或更低位阶标题（避免破坏文档层级）
• 常见内容：文章标题、作者、发布时间、分类标签等
• 示例：

  <article>
    <header>
      <h2>夏季防蚊指南</h2>
      <p class="author">张医生</p>
      <time datetime="2026-06-20">2026年6月20日</time>
    </header>
    <p>蚊子活跃期……</p>
  </article>

section 级 <header> 适用有标题的逻辑分段
比如一篇教程中“安装步骤”“配置说明”这类带小标题的区块：

• <section> 开头有 <h3> 和简短导语，可用 <header> 包裹
• 不强制要求，但包裹后语义更清晰，利于结构化数据提取

不要混淆的边界

• 侧边栏导航、卡片内操作菜单、页脚上方的快捷链接 → 应用独立 <nav>，不塞进 <header>
• 纯样式需求（如固定定位、背景色）→ 用 <div class="site-header">，而非 <header>
• 空 <header> 或仅含 <nav> → 会误导屏幕阅读器，Lighthouse 可访问性审计报错

本质上，<header> 是内容角色的声明，不是视觉布局的替代品。