<header>仅表示内容区块的语义头部，非全页顶部万能容器；适用场景为页面、<article>或<section>等独立单元的开头部分，禁止嵌套或滥用为样式盒。
<header> 不是“必须包住整个页面顶部”的万能容器，它只代表一个内容区块的头部——可以是整个页面的页眉，也可以是 <article> 或 <section> 内部的标题区。
什么时候该用 <header>？
判断依据只有一个：这段内容是否在语义上属于某个“可独立理解的内容单元”的开头部分。
- 整个页面最上方的导航+logo+搜索框 → 适合用
<header>包裹（作为<body>的直接子元素） - 一篇博客文章开头的标题、作者、发布时间 → 应该放在
<article>内部的<header>里 - 一个产品列表区块上方的“热门商品”标题和筛选控件 → 可以套在
<section>内的<header>中 - 纯装饰性 banner 图、无实际标题或导航功能的横幅 → 不该用
<header>，用<div>更合适
<header> 里能放什么？常见误用点
它允许包含大多数流内容（<h1>–<h6>、<p>、<nav>、<img> 等），但不能嵌套另一个 <header>，也不能当“样式盒子”滥用。
- ✅ 正确：
<header><h1>我的博客</h1><nav>...</nav></header> - ✅ 正确：
<article><header><h2>如何调试 CSS</h2><p>作者：张三</p></header><p>正文开始...</p></article> - ❌ 错误：
<header><header>...</header></header>（嵌套无效，语义混乱） - ❌ 错误：把整页顶部所有 div 都塞进一个
<header>，只为方便写 CSS（破坏语义，影响屏幕阅读器识别）
和 <nav>、<h1> 的配合关系
<header> 是容器，<nav> 是导航专用语义标签，<h1> 是层级标题——三者常共存，但职责分明。
立即学习“前端免费学习笔记（深入）”；
-
<nav>必须出现在有意义的导航上下文中；如果只是几个链接，没构成“主导航”，就别硬套<nav> - 一个
<header>里可以没有<h1>（比如只有 logo + 搜索框），但如果有标题，优先用<h1>–<h6>而不是<div class="title"> - 多个
<header>出现在一页时，每个都应有明确归属（如分别属于不同<article>），避免全用<h1>导致大纲混乱
<header>
<h1>网站主标题</h1>
<nav aria-label="主导航">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h2>CSS Grid 布局实战</h2>
<p><time datetime="2024-04-10">2024年4月10日</time></p>
</header>
<p>正文内容...</p>
</article>
真正容易被忽略的是：浏览器不会因为用了 <header> 就自动加样式或提升 SEO 权重，它的价值完全依赖于你是否用对了语义结构。一旦把它当成“高级 div”来用，反而会让辅助技术更难理解页面逻辑。
