仅用于包裹承担引导性内容的语义区块，如页面级站点标题+logo+搜索框、文章级标题+作者信息等；单纯为样式（如背景色、fixed定位）使用属误用，应改用或更精确标签。
<header></header> 不是“网页最上面那条横条”的语义化替身，它只在包裹真正承担「引导性内容」的区块时才合法——比如含 <h1></h1> 的站点标题、文章开头的 <h2></h2> + 作者信息，或 <section></section> 自带的标题区。单独套一层只为加背景色或固定定位？那是 <div class="site-header"> 的事。
<h3>什么时候必须用 <code><header></header> 而不是 <div>
<p>关键看内容是否构成某个「语义区块的头部上下文」：</p>
<ul>
<li>页面级：包含 <code><h1></h1> + <nav></nav> + logo（带 alt）+ 搜索框 → 合法 <header></header>
<article></article> 内部有 <h2></h2> + <p class="author"></p> + <time></time> → 应嵌一个 <header></header>
<section></section> 开头有 <h3></h3> 和简短导语 → 可用 <header></header> 包裹<header></header>，用 <div> 或更精确的 <code><section></section>
padding、设 position: fixed → ❌ 这是样式需求，不是语义需求
<header></header> 里能放什么、哪些写法直接破坏语义
它允许常见流内容，但有硬性边界：
- ✅ 允许：
<h1></h1>–<h6></h6>、<nav></nav>、<p></p>、<img alt="...">、<form></form>（如搜索框） - ❌ 禁止嵌套另一个
<header></header>：浏览器会忽略内层语义，读屏器可能误判层级 - ❌ 禁止空泛使用：只有
<div class="logo"> + <code><ul class="nav"></ul>，没标题、没导航意图 → 语义断裂，WAVE 工具会报 “Missing heading in landmark” - ❌ 禁止脱离节元素存在：比如直接放在
<footer></footer>外又没被<section></section>或<article></article>包裹 → 上下文悬空 - ⚠️ 注意：
<header></header>不自动带 ARIA role；最外层页眉建议手动加role="banner"，否则纯<p></p>+<img>可能被屏幕阅读器跳过 - IE9+ 原生支持标签解析，但 IE9 不支持 CSS 中的
header选择器 → 需引入html5shiv并补document.createElement('header') - 现代项目（2026 年绝大多数）已放弃 IE8 支持，但需确认构建流程中无残留条件注释或 hack
- 移动端用
position: fixed容易触发 iOS Safari 滚动穿透或输入框失焦 → 更推荐position: sticky或 JS 补偿逻辑 - 别写
<header class="header"></header>这种冗余 class —— 标签本身已表达语义，class只用于样式钩子，如header.site-header
兼容性与样式常见踩坑点
<header></header> 默认就是 display: block，和 <div> 一样“干净”：
<ul>
<li>它不自带 <code>margin、padding 或背景色——所有样式必须显式定义，比如 header { padding: 1rem 0; }
最容易被忽略的一点：语义化不是“加了就完事”，而是要和整体节结构（<section></section>、<article></article>、<main></main>）对齐。单独扔一个 <header></header> 在 下，又不包裹任何节元素，它的语义归属就悬空了。
