header 必须包含标题（h1–h6）才具语义价值，页面级用 h1，文章级用 h2/h3；nav 应独立且带 aria-label；轮播图、广告等非引导内容不得塞入 header；多个 header 需明确归属节结构。
header 标签本身不定义视觉样式，也不自动构成“页眉”——它只在包裹真正承担引导性、介绍性内容时才产生语义价值。没标题，就等于没写。
必须含 <h1>～<h6>，否则语义断裂
屏幕阅读器看到空 header 或仅含 img、nav 的 header，会读作“header”后直接跳过，不播报任何可操作内容；Lighthouse 报错 “Missing heading in landmark” 就是这个原因。
- 页面级
header（body直系子元素）应至少含一个<h1>，如<h1>技术博客</h1> - 文章内部的
header（嵌套在article里）用<h2>或<h3>，不能硬套<h1> -
hgroup已废弃，副标题改用<h2><small>副标题</small></h2>或<h2>主标题</h2><p class="subtitle">副标题</p> - 纯图片 logo 必须带
alt，且最好与标题文字语义一致，比如<img src="logo.svg" alt="技术博客">
nav 可以放，但得明确归属和边界
nav 是独立地标（landmark），不是 header 的子集；把它塞进 header 是常见做法，但前提是它服务于该 header 所属的上下文。
- 主导航建议写成
<nav aria-label="主导航"><ul>...</ul></nav>，aria-label防止读屏器误读为普通列表 - logo 和搜索框不属于导航，别塞进
nav里——它们属于header，但应放在nav外部 - 如果页面有多个导航（顶部 + 侧边），每个都该单独用
nav，并配不同aria-label，比如aria-label="分类导航" - 没有
nav的header依然合法，只要它有标题+logo+搜索这类引导性内容
轮播图、广告、通知条别往 header 里塞
这些内容哪怕视觉上在顶部，也不属于“页眉”语义——它们是独立功能区块，强行塞进 header 会导致结构混乱、SEO 权重稀释、读屏器误报。
立即学习“前端免费学习笔记（深入）”；
- 轮播图用
<section>或<div role="region" aria-labelledby="carousel-title">更合适 - 广告横幅、客服浮窗、多语言切换器属于界面控件，推荐
<div role="complementary"> - 通知条（如“系统维护中”）建议用
<aside>或带role="alert"的div - 把所有顶部视觉模块堆进第一个
header，等于让辅助技术把广告当成网站入口
多个 header 共存没问题，但必须绑定节结构
一个页面可以有多个 header，但每个都得明确归属——它不是全局容器，而是为最近的节元素（body、article、section）提供上下文包装。
- 最外层
header：作为body第一个子元素，含站点名 + 主导航，可加role="banner" - 文章级
header：放在article内部，含<h2>+ 作者 +<time>，不出现全站导航 -
section级header：比如“相关推荐”区块顶部放<h2>你可能还喜欢</h2>就够了 - 禁止悬空：
header不能脱离节结构单独存在，比如放在footer外又没被section包裹，语义就失效了
最容易被忽略的是归属对齐：header 不创建新节，它只是为最近的节根或节元素服务。没想清楚“这个 header 属于谁”，所有语义努力都会打折扣。
