标签无权重算法，其语义价值仅取决于是否正确归属节元素及内部是否含有效标题；多层嵌套不提升权重，反而因解析修正和归属断裂导致语义失效。
HTML 中的 <header></header> 标签本身没有“权重算法”，搜索引擎和辅助技术不按嵌套层数给它加分或降权；它的语义价值只取决于是否被正确归属到一个节元素（如 、<article></article>、<section></section>），以及内部是否含有效标题。
为什么多层 <header></header> 嵌套不提升语义权重
浏览器和爬虫不会因为写了三层 <header></header> 就认为“这个页眉更重要”。相反，<header></header> 是“上下文包装器”，不是“节创建者”——它不生成大纲节点，也不改变层级深度。嵌套本身会被解析器自动修正（比如 <header><header>...</header></header> 中内层会被忽略）。
- DOM 解析时，连续嵌套的
<header></header>会被视为无效结构，浏览器会“修复”为单层 - 屏幕阅读器只播报有 heading 或 nav 的那个
<header></header>，其余空<header></header>被跳过或报“空页眉” - Lighthouse 的 “Landmark elements” 检测项只计数有效
<header></header>（即含<h1></h1>–<h6></h6>或<nav></nav>的）
<header></header> 的归属逻辑：谁才是它的“最近节根”
关键不是嵌套多少层，而是它离哪个节元素最近。这个“归属关系”决定了它的语义范围——也是机器唯一能识别的上下文。
- 顶层
<header></header>在下 → 归属整页，必须含<h1></h1>或主导航 -
<article><header><h2>标题</h2></header></article>→ 归属该<article></article>，<h2></h2>成为其节标题 -
<section><header><h3>小节标题</h3></header></section>→ 归属该<section></section>，不影响全局大纲 - 若写成
<div><header></header></div>→ 归属断裂，<header></header>变成悬空语义，等同于没用
实战中容易被忽略的归属陷阱
多数问题不出在“怎么写”，而出在“谁包了谁”——尤其在组件化开发或 CMS 模板中，DOM 结构常被 JS 动态插入或 SSR 渲染污染。
- Next.js 页面组件里，
<header></header>被包裹在<div id="app"> 内 → 它不再归属 <code>，而是归属那个无语义的<div>，整页失去页面级页眉语义 <li>Vue 组件中用 <code><template><header>...</header></template>，但父组件用<div class="wrapper"> 包裹 → 同样导致归属失效 <li>SSR 输出 HTML 时，header 里漏了 <code><h1></h1>，只留<nav></nav>→ 部分旧版爬虫可能忽略该<header></header>的导航上下文 - 用
display: contents或replaceCSS 属性让父容器“消失” → DOM 结构未变，但视觉上破坏了父子关系感知，影响可访问性树构建
验证归属是否生效的三行命令
不用开 Lighthouse，直接在控制台跑：
document.querySelector('header h1') // 看有没有主标题
document.querySelector('body > header') // 看是否为 body 直系子元素
document.querySelectorAll('header').forEach(h => console.log(h.parentElement.tagName)) // 检查每个 header 的父元素
如果第二条返回 null，或者第三条里出现大量 DIV、SECTION（而非 BODY、ARTICLE），就说明归属链断了——这时候删掉多余嵌套，比加更多 <header></header> 有用得多。
