header仅在承载介绍性或导航性上下文（如标题、作者、时间）时使用，单独存在无语义价值；滥用会损害可访问性、SEO与维护性，应避免用于纯布局。
<header></header> 不是“页面最上面那块儿”的通用容器，它只在内容真正承担「介绍性或导航性上下文」时才该用——比如含 <h1></h1>～<h6></h6>、<nav></nav>、作者信息、发布时间等。滥用它会导致屏幕阅读器读出一堆空洞的“header”，SEO 抓取权重被稀释，维护时连自己都看不懂结构。
header 必须包裹标题元素才有语义价值
单独一个 <header></header> 标签不产生任何可访问性意义，也不影响大纲生成。它的作用是为内部的标题、导航或元信息提供语义上下文。
- 正确写法：
<header><h1>我的技术博客</h1> <nav>...</nav></header> - 错误写法：
<header><div class="logo">...</div> <div class="nav">...</div></header>（无 heading，语义断裂） -
<hgroup></hgroup>已被废弃，别再用；多级标题改用<h1></h1>+<p class="subtitle"></p>替代 - 移动端缩放后文字过小？这不是语义问题，但常被忽略：记得给
<header></header>内文本设min-font-size
多个 header 可以共存，但每个都得有明确归属
一个页面可以有多个 <header></header>：顶层用于整页入口，<article></article> 里可以有自己的 <header></header>，<section></section> 内也能配一个——前提是它服务于该区块的标题或引导逻辑。
- 允许：
<header>...</header><main><article><header><h2>文章标题</h2> <time>2024-03-15</time></header><p>正文</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></article></main> - 禁止：
<header><header>...</header></header>（嵌套无依据）或<footer><header>...</header></footer>（语义越界） - 如果顶部只有导航栏、没 logo 也没标题，直接用
<nav></nav>更准确；硬加<header></header>属于冗余
别拿 header 当 CSS 布局工具用
有人把 <header></header> 当成带语义的 <div class="site-header">，疯狂加 <code>position: fixed、top: 0，结果视觉和语义完全脱钩。
- 布局控制请用
<div class="site-header"> + CSS；需要语义再额外包一层 <code><header></header> - 若真要用
<header></header>实现吸顶效果，务必检查z-index和contain: layout paint是否干扰滚动性能 - 浏览器不会给
<header></header>自动加样式，它默认是流式宽度、无 margin；靠它“撑高度”或“清浮动”会埋坑
最容易被忽略的点：header 的语义有效性完全依赖其子元素是否真实承载介绍性功能。没有 <h1></h1>～<h6></h6>、没 <nav></nav>、没发布时间或作者信息，那它就只是个空壳——不如老实用 <div>。</div>
