header 必须作为节元素（如section、article）的直接子元素，不可嵌套于其他header或非节容器中；否则将丢失语义，导致屏幕阅读器跳过、Lighthouse失败、SEO失效。
header 不能嵌套另一个 header
浏览器不会报错，但内层 <header></header> 会丢失语义上下文——它不再被识别为“某个区块的页眉”，而退化成普通容器。屏幕阅读器跳过、Lighthouse 检测失败、SEO 结构化数据提取失效，都是直接后果。
常见错误写法：<header><header><h1>标题</h1></header></header>
- 正确做法：每个
<header></header>必须是某个节元素（、<article></article>、<section></section>）的直接子元素 - 多级页眉需求（比如整页 + 文章内），应分别放在不同父容器下：
<header>…</header><article><header>…</header></article> - 若只是想视觉上分组，用
<div> + CSS，别硬套 <code><header></header>header 可以包含 nav，但必须语义匹配
<nav></nav>放在<header></header>里没问题，前提是这个导航服务的是该<header></header>所属上下文。比如页面顶部的主导航、文章开头的“上一篇/下一篇”链接，都算合理；但把侧边栏跳转或用户菜单塞进去，就破坏了语义边界。- 页面级
<header></header>中放主站导航（<nav></nav>）合规且推荐 - 文章级
<header></header>中放该文专属导航（如章节锚点）也合规 - 全站通用导航更宜作为
的直接子元素，与<header></header>并列，而非嵌套其中 - 务必给
<nav></nav>加aria-label（如aria-label="主菜单"），尤其当页面有多个<nav></nav>时
header 不得脱离节元素独立存在
<header></header>不是自由漂浮标签，它必须嵌套在合法的父容器内。最常见错误是把它丢在外、或塞进<footer></footer>/<main></main>里又没包裹节元素，结果 DOM 结构断裂，辅助技术无法归类。立即学习“前端免费学习笔记（深入）”；
- 允许的父级：
、<article></article>、<section></section>、<aside></aside>等语义节元素 - 禁止的父级：
<footer></footer>、<main></main>、<nav></nav>、<div>（除非该 <code><div> 是明确的节容器，如 <code><div role="article">） <li>空 <code><header></header>（只含按钮、纯表单、孤立 logo 图片）等于没提供结构信号，应删掉或补上标题/导航意图
header 与 footer 不能互相嵌套
<header><footer>…</footer></header>这种写法无效。两者是平级语义单元，不是父子关系。浏览器会降级处理，视作普通<div>，所有语义和可访问性支持全部丢失。 <ul> <li>正确并列结构：<code><header>…</header><main>…</main><footer>…</footer> - 页面级
- 它们可以各自嵌套在不同层级的节中，比如
<article><header>…</header><footer>…</footer></article> - 切忌为了视觉排版强行挪动 DOM 位置——语义结构必须和实际 DOM 顺序一致
<img alt="HTML代码中header标签嵌套规则" > 和 <button></button> 的 <header></header>，对爬虫和读屏器来说几乎不可见；真正起作用的是它是否包含 <h1></h1>～<h6></h6> 或有效的导航链接。
