header 的语义归属取决于离它最近的父级节元素（如 body、article、section、nav），而非视觉位置或嵌套层数；浏览器、读屏器和搜索引擎均依此解析结构，标题级别须与所属节元素层级匹配，且 header 必须包裹介绍性内容才有语义价值。

header 的语义归属，取决于它离得最近的那个节元素（sectioning element），而不是它在页面上看起来“在哪儿”或者套了几层。浏览器、读屏软件、搜索引擎都按这个规则理解结构，不是看 CSS 定位，也不是数嵌套层数。

归属由最近的节元素决定

每个 <header></header> 都自动绑定到它最近的父级节元素——也就是 、<article></article>、<section></section> 或 <nav></nav>。这个父级决定了它的语义范围和标题层级：

• <header><h1>首页</h1></header> → 归属整页，<h1></h1> 是全站主标题
• <article><header><h2>如何用 header</h2> <time>2026-06-23</time></header><p>正文...</p></article> → 归属这篇文章，<h2></h2> 是该文标题，不是全站 H1
• <section><header><h3>相关推荐</h3></header><ul>...</ul></section> → 归属这个 section，<h3></h3> 级别合理，上下文清晰

嵌套必须有明确作用域链

可以嵌套 <header></header>，但每层都要对应一个实际存在的节元素，不能凭空堆叠：

• 允许：<header>...</header><main><article><header>...</header></article></main> —— 外层属页面，内层属文章，逻辑闭环
• 禁止：<header><header><h2>标题</h2></header></header> —— 内层没有父节元素支撑，语义断裂，读屏器无法识别层级
• 禁止：<footer><header><h2>底部说明</h2></header></footer> —— <footer></footer> 不是节元素，不能作为 <header></header> 的合法父容器

标题级别必须匹配归属层级

标题标签的级别不是随便写的，要跟它所属的节元素层级对齐：

• 页面级 <header></header>（直接子于 ）宜用 <h1></h1>，最多一个
• 文章级 <header></header>（在 <article></article> 内）应降级为 <h2></h2> 或 <h3></h3>，避免重复 H1
• 区块级 <header></header>（在 <section></section> 内）用 <h3></h3> 或 <h4></h4>，保持文档大纲连续
• 单独写 <header></header> 或只放按钮、图片、表单——没标题，就等于没提供语义锚点，会被读屏器跳过

常见误用：位置≠语义，样式≠结构

<header></header> 不代表“页面最上面那条横条”，也不等于“我要加个背景色”。它的存在意义只有一条：是否包裹了某个作用域的介绍性内容？

• 顶部只有导航栏、没 logo 也没标题？用 <nav></nav> 更准确，硬套 <header></header> 属冗余
• 轮播图、广告横幅、登录弹窗放在页面最上方？它们不属于“介绍性区域”，该用 <section></section> 或带类名的 <div> <li>需要 fixed 定位或撑高度？先用 <code><div class="site-header"> 控制样式，再在里面嵌套语义正确的 <code><header></header> 并确保含标题