header 必须包含标题（h1–h6）才具语义价值，页面级用 h1，文章级用 h2/h3；nav 应独立且带 aria-label；轮播图、广告等非引导内容不得塞入 header；多个 header 需明确归属节结构。

header 标签本身不定义视觉样式，也不自动构成“页眉”——它只在包裹真正承担引导性、介绍性内容时才产生语义价值。没标题，就等于没写。

必须含 <h1></h1>～<h6></h6>，否则语义断裂

屏幕阅读器看到空 header 或仅含 img、nav 的 header，会读作“header”后直接跳过，不播报任何可操作内容；Lighthouse 报错 “Missing heading in landmark” 就是这个原因。

• 页面级 header（body 直系子元素）应至少含一个 <h1></h1>，如 <h1>技术博客</h1>
• 文章内部的 header（嵌套在 article 里）用 <h2></h2> 或 <h3></h3>，不能硬套 <h1></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 所属的上下文。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 主导航建议写成 <nav aria-label="主导航"><ul>...</ul></nav>，aria-label 防止读屏器误读为普通列表
• logo 和搜索框不属于导航，别塞进 nav 里——它们属于 header，但应放在 nav 外部
• 如果页面有多个导航（顶部 + 侧边），每个都该单独用 nav，并配不同 aria-label，比如 aria-label="分类导航"
• 没有 nav 的 header 依然合法，只要它有标题+logo+搜索这类引导性内容

轮播图、广告、通知条别往 header 里塞

这些内容哪怕视觉上在顶部，也不属于“页眉”语义——它们是独立功能区块，强行塞进 header 会导致结构混乱、SEO 权重稀释、读屏器误报。

• 轮播图用 <section></section> 或 <div role="region" aria-labelledby="carousel-title"> 更合适 <li>广告横幅、客服浮窗、多语言切换器属于界面控件，推荐 <code><div role="complementary"> <li>通知条（如“系统维护中”）建议用 <code><aside></aside> 或带 role="alert" 的 div
• 把所有顶部视觉模块堆进第一个 header，等于让辅助技术把广告当成网站入口

多个 header 共存没问题，但必须绑定节结构

一个页面可以有多个 header，但每个都得明确归属——它不是全局容器，而是为最近的节元素（body、article、section）提供上下文包装。

• 最外层 header：作为 body 第一个子元素，含站点名 + 主导航，可加 role="banner"
• 文章级 header：放在 article 内部，含 <h2></h2> + 作者 + <time></time>，不出现全站导航
• section 级 header：比如“相关推荐”区块顶部放 <h2>你可能还喜欢</h2> 就够了
• 禁止悬空：header 不能脱离节结构单独存在，比如放在 footer 外又没被 section 包裹，语义就失效了

最容易被忽略的是归属对齐：header 不创建新节，它只是为最近的节根或节元素服务。没想清楚“这个 header 属于谁”，所有语义努力都会打折扣。