header标签无固定位置，仅表示内容引导性开头；页面级header需在body直系子级并含标题与全局导航，文章级header须嵌套于article或section内且含专属降级标题。
header 标签本身没有固定位置，它只表达“这是某块内容的引导性开头”，既可用于整页头部，也可用于文章或章节头部——关键不在它在哪，而在它包裹什么、服务谁。
页面级 header：承载全站入口上下文
当它出现在 直接子级，且内部含站点标识性内容时，就构成页面级页眉。它必须提供全局导航锚点和身份信号：
- 至少包含一个匹配语境的标题（如首页用
<h1>我的博客</h1>，列表页可用<h2>全部文章</h2>） - 可搭配
<nav></nav>（主导航）、<img alt="logo">、搜索<form></form>等，但所有元素需共同服务于“你是谁、你能去哪”这一目的 - 若顶部只有纯导航栏、无标题也无 logo，直接用
<nav></nav>更准确，硬套<header></header>属于语义冗余
文章/章节级 header：为局部内容提供语义起点
嵌套在 <article></article> 或 <section></section> 内部时，<header></header> 的作用范围收缩至该区块自身，此时它不描述整个页面，而聚焦于“这段内容的开头是什么”：
- 必须含该区块专属标题，级别需降级（如
<article></article>用<h2></h2>，其内<section></section>用<h3></h3>） - 常见组合：
<h2>响应式设计原理</h2> <p class="author">张三</p> <time datetime="2026-06-20">2026年6月20日</time> - 不能脱离父级节元素存在——单独扔一个
<header><h2>标题</h2></header>在下却没包在<article></article>或<section></section>里，语义归属就悬空了
双重性质不等于随意混用
一个页面可以同时存在多个 <header></header>，但每个都必须有明确归属，不能靠位置猜意图：
- ✅ 允许：
<header>...</header><main><article><header>...</header><p>正文</p></article></main> - ❌ 禁止：
<header><header>...</header></header>（嵌套无依据）、<footer><header>...</header></footer>（越界）、仅含轮播图或广告的<header></header>（非引导性内容） - ⚠️ 注意：它不自动产生大纲层级，也不自带 ARIA role；最外层页眉可加
role="banner"强化语义，但内部<header></header>不需要
别让视觉干扰语义判断
是否用 <header></header> 和它是否在页面最上面无关，而取决于内容功能：
- 顶部轮播图、促销横幅、登录入口——哪怕视觉上在最顶，也不属于页眉语义，该用
<section></section>或<div> <li>固定定位、背景色、清浮动等纯样式需求，请用 <code><div class="site-header"> 实现布局，再在其内部按需嵌套语义正确的 <code><header></header> - 移动端慎用
position: fixed，优先考虑position: sticky，避免滚动穿透问题被语义标签掩盖
