标签仅用于包裹语义上的标题性内容，如logo、导航、搜索框等，并必须包含–等标题元素；不可滥用为视觉布局容器或塞入轮播图、广告等非标题内容。
header 标签不是“网页最上面那块儿”的通用容器
它只该包裹页面或区块的「标题性内容」，比如网站 logo、主导航、搜索框——但前提是这些内容在语义上属于当前范围的「页眉」。很多人一看到顶部就套 <header></header>，结果把轮播图、广告位甚至登录弹窗都塞进去，反而破坏了无障碍阅读和 SEO 结构。
常见错误现象：screen reader 读出一堆“header”却找不到实际标题；outline 工具显示多个嵌套 <header></header> 但无对应 <h1>–<h6></h6>
</h1> 支撑。
- 一个页面可以有多个
<header></header>（比如<article></article>内部也能有自己的<header></header>），但每个都必须承载该范围的「引导性内容」 - 不包含主要内容（如文章正文、商品列表）；也不该用来做视觉居中或清浮动的“样式占位符”
- 如果顶部只有导航栏，且没有 logo 或站点标题，用
<nav></nav>更准确；硬加<header></header>属于语义冗余
header 必须配合 heading 元素才有语义价值
单独一个 <header></header> 标签不会自动产生层级或可访问性意义。它的作用是为内部的 <h1></h1>～<h6></h6>、<hgroup></hgroup> 或其他标题相关元素提供上下文包装。
使用场景：博客首页的站点名 + 副标题 + 导航；文章页内每篇 <article></article> 自带的标题 + 发布时间 + 作者信息。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<header><h1>站点名称</h1> <nav>...</nav></header> - 避免：
<header><div class="logo">...</div> <div class="nav">...</div></header>（没 heading，语义断裂） -
<hgroup></hgroup>已被废弃，别再用；多级标题建议用<h1></h1>+<p class="subtitle"></p>替代
不要用 header 替代 CSS 布局需求
有人为了省事，把 <header></header> 当成“顶部固定区域”的语义化 <div>，然后疯狂写 <code>position: fixed、top: 0。这会导致两个问题：一是视觉布局和语义完全脱钩，二是当用户缩放或使用高对比度模式时，<header></header> 的默认行为（如流式宽度、默认 margin）可能意外干扰定位逻辑。
- 布局用
<div class="site-header"> + CSS 控制更可控；需要语义再额外包一层 <code><header></header> - 如果确实要用
<header></header>实现吸顶效果，务必检查z-index和contain: layout paint是否影响滚动性能 - 移动端 viewport 缩放后，
<header></header>内部文字若未设min-font-size，可能小到无法识别——这不是语义问题，但常被忽略 - 典型合理嵌套：
<header>...</header><main><section><header>章节标题</header><article><header>文章标题</header>...</article></section></main> - 反例：
<footer><header>版权信息</header></footer>（版权信息属于 footer 范畴，不该用 header 表达） - 浏览器对深层嵌套
<header></header>没限制，但屏幕阅读器通常只识别前两层，更深的容易被跳过
嵌套 header 的边界在哪
可以嵌套，但必须符合「范围从大到小」的逻辑链：页面级 <header></header> → 区块级 <section></section> → 其内部的 <header></header> → 再下一级 <article></article> 的 <header></header>。一旦跳级或反向嵌套（比如在 <footer></footer> 里塞 <header></header>），就会让辅助技术困惑。
header 的难点不在写法，在判断「这里到底算不算一个独立的标题上下文」。很多时候删掉 <header></header> 反而更干净——只要 heading 和 nav 的父子关系清晰，语义就已经成立。
