一个页面可有多个header，但须有明确归属且不可嵌套；合法场景包括页面顶层、section/article内部等，需含标题、导航、元信息等语义内容，空header不参与大纲。
一个页面能用几个 <header></header>？
可以多个，但每个都得有明确归属，不是“越多越语义化”。浏览器和读屏器靠上下文判断作用域，没上下文的 <header></header> 就是空壳。
常见合法场景包括：
- 页面最外层一个
<header></header>，放在下，包裹 logo +<nav></nav>+ 搜索框 - 每个
<article></article>内部一个<header></header>，含<h2></h2>标题 +<time></time>+ 作者信息 - 每个
<section></section>开头一个<header></header>，比如“第三章：性能优化”配<h2></h2>和简短导语
注意：<header></header> 不必都出现在页面顶部；它可出现在任意节元素（<article></article>、<section></section>、<aside></aside>）内部，只要服务该区块的引导性内容。
<header></header> 能不能嵌套在另一个 <header></header> 里？
不能。HTML5 规范明确禁止 <header></header> 嵌套 <header></header> —— 语义重复，浏览器会忽略内层的节上下文，读屏器可能错判层级。
立即学习“前端免费学习笔记（深入）”；
典型错误写法：
<header> <h1>主站标题</h1> <header><h2>子模块标题</h2></header> </header>
正确做法是用节元素隔离作用域：
<header>
<h1>主站标题</h1>
<nav>...</nav>
</header>
<section>
<header>
<h2>子模块标题</h2>
</header>
<p>模块内容...</p>
</section>
哪些内容必须出现在 <header></header> 里才不算滥用？
<header></header> 的语义有效性完全依赖子元素是否真实承载介绍性或导航性功能。纯样式容器请用 <div class="site-header">。
<p>合法子元素（且需有实际语义作用）：</p>
<ul>
<li>
<code><h1></h1>～<h6></h6>：标题必须与当前作用域匹配（如 <article></article> 内用 <h2></h2>）
<nav></nav>：仅当它是该范围的主要导航（如文章内目录不算，整站主导航才算）<time datetime=""></time>：发布时间、更新时间等元信息<img alt="">：仅限 logo 或标识性图片，非装饰图<form></form>：仅限搜索框等与头部功能强关联的表单禁止放入：
- 轮播图、广告位、CTA 按钮（无介绍/导航意图）
- 仅含
<button></button>或<div class="logo"> 的空泛结构 <li> <code><p></p>纯说明文字但无标题、无时间、无作者——这类应归入正文或用<aside></aside>
为什么有些 <header></header> 在大纲里“消失”了？
因为没提供足够语义信号：单独一个 <header></header> 包裹 <h1></h1>，不如直接用 <h1></h1>；如果 <header></header> 里只有 <img alt="HTML中header标签在一个页面中多次出现的场景和嵌套规范" > 和 <p></p>，没有标题也没有 <nav></nav>，它就不参与文档大纲生成。
最容易被忽略的点是：<header></header> 本身不贡献层级，它只是容器。真正驱动大纲的是里面的 <h1></h1>～<h6></h6>，以及它们所在的节上下文（<article></article>、<section></section>）。没标题的 <header></header>，对 SEO 和辅助技术几乎无价值。
