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>并确保含标题
