标签不是自动绑定的全局页眉，其语义取决于位置和嵌套结构；整站页眉应作为 的首个子元素且不被包裹，区域页眉则用于 或 内部，需合理使用 heading 级别并配合 等标签确保语义清晰。
header 标签不是“全局页眉”的自动绑定机制
直接把 <header></header> 放在 顶层，并不会让浏览器或搜索引擎把它识别为“全站页眉”。它只是语义化容器，作用完全取决于你放的位置和嵌套结构。浏览器不强制渲染样式，搜索引擎也只按 DOM 层级理解语义。
常见错误是写成这样：
<header><h1>我的网站</h1></header><main>...</main>
这看起来像页眉，但若页面有多个 <section></section> 或 <article></article>，它们内部的 <header></header> 才更可能被解析为对应区块的页眉 —— 这才是它的本意。
整站页眉该放在哪里？用什么结构？
真正代表“整站页眉”的 <header></header>，应作为 的第一个子元素，且不被其他区块级元素包裹（比如别套在 <div class="wrapper"> 里再丢进去）。它里面可以包含 logo、主导航、搜索框等。
<ul>
<li>必须直接位于 <code> 下，层级最浅
<nav></nav> 放导航，而不是用 <div> 或无语义容器
<li>避免在它里面塞 <code><main></main> 或 <footer></footer> —— 语义冲突会导致辅助技术误读<header></header> 的 display 没被意外重置（比如某些重置样式设了 display: block 却没处理 flex 子项）正确示例：
<header><h1>站点标题</h1>
<nav><ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
</ul></nav></header><main>...</main><footer>...</footer>
区域页眉（如 article 或 section 的 header）怎么写才不混淆？
每个 <article></article> 或 <section></section> 可以自带 <header></header>，用于该区块的标题、副标题、作者信息等。这种用法和整站页眉完全独立，互不影响。
容易踩的坑：
- 误以为一个页面只能有一个
<header></header>—— 实际可多个，只要层级合理 - 把文章副标题写成
<h2></h2>却没包在<header></header>里，语义丢失；或者包了却和整站<header></header>平级，导致结构扁平、缺乏层次 -
<header></header>里混用<h1></h1>—— 整站用<h1></h1>，区块内应从<h2></h2>或更低开始，否则破坏文档大纲
示例（文章区块）：
<article><header><h2>这篇文章的标题</h2>
<p><time datetime="2024-05-20">2024年5月20日</time> · 作者：张三</p>
</header><p>正文内容...</p>
</article>
SEO 和无障碍支持依赖结构，不是标签名
光写 <header></header> 不等于 SEO 提权或屏幕阅读器自动朗读“页眉”。起作用的是：它是否在 DOM 中处于合理位置、是否包裹恰当的 heading 元素、是否与 <main></main> / <nav></nav> 等配合形成清晰流式结构。
实操建议：
- 用浏览器开发者工具的「Accessibility」面板检查
<header></header>是否被识别为 banner（整站页眉）或 complementary（区域页眉） - 运行 Lighthouse，关注 “Document has a valid heading structure” 和 “
<header></header>element has a landmark role” 这两项 - 别为了“语义化”硬套
<header></header>—— 如果只是装饰性横幅、没有导航或标题信息，用<div role="banner"> 或干脆不用更稳妥 <p>最常被忽略的一点：header 的语义有效性，完全由它在上下文中的角色决定，而不是你写了这个标签。位置错、嵌套乱、heading 级别崩，标签就只是个空壳。</p> </div>
