header必须包裹标题元素才有语义价值，否则屏幕阅读器仅读“header”后跳过；页面级header至少含一个匹配上下文的标题，嵌套时标题级别需降级，禁用已废弃的hgroup，副标题改用span或内嵌small；纯样式需求不应滥用header，轮播图等非页眉内容应使用section或aside；多个header可共存但须归属清晰；ie9+需html5shiv支持css选择器，推荐类名驱动样式；header不创建新节，须对齐最近的section/article根元素。
header 必须包裹 <h1></h1>～<h6></h6> 才有语义价值
单独写 <header></header> 标签，不放任何标题元素，等于没写。屏幕阅读器只会读出“header”，然后跳过——因为它找不到可聚焦、可识别的结构锚点。搜索引擎和 Lighthouse 也会报 “Missing heading in landmark”。
- 页面级
<header></header>至少得含一个<h1></h1>（如站点名）或与上下文匹配的标题（比如文章页用<h1></h1>，列表页用<h2></h2>） - 嵌套在
<section></section>里的<header></header>，标题级别要降级：若<section></section>是文章子章节，用<h2></h2>或<h3></h3>，不能硬套<h1></h1> -
<hgroup></hgroup>已废弃，副标题别再用它；改用<h2></h2>+<p class="subtitle"></p>或直接<h2></h2>内嵌<small></small>
别把 <header></header> 当 <div> 用
<p>加背景色、设 <code>position: fixed、清浮动、撑高度……这些全是样式需求，不是语义需求。用 <header></header> 干这事，等于给辅助技术发错误信号。
- 视觉上需要固定定位的顶部栏？先用
<div class="site-header"> 控制布局，再在里面套一层语义正确的 <code><header></header>（且确保它含标题）
- 轮播图、广告横幅、登录弹窗——哪怕在页面最上面，也不属于“页眉”语义，该用
<section></section> 或 <div>，别塞进 <code><header></header>
- 移动端
position: fixed 容易触发 iOS Safari 滚动穿透，这不是 <header></header> 的锅，但混用会放大问题：建议优先试 position: sticky，必要时配 JS 补偿
多个 <header></header> 可以共存，但归属必须清晰
一个页面可以有好几个 <header></header>，前提是每个都明确服务于某个节（<article></article>、<section></section>），而不是堆叠或悬空。
- 顶层
<header></header> 在 <h1></h1> + <nav></nav> → 代表整站入口
- 某篇
<article></article> 开头另起一个 <header></header>，含 <h2></h2> + <time></time> + <p class="byline"></p> → 服务该文章上下文
- 禁止：
<header></header> 嵌套在 <footer></footer> 里、<header></header> 套 <header></header>、<header></header> 放在 <main></main> 外又不包裹任何节元素——语义归属断裂，浏览器会忽略内层结构
- 最外层
<header></header> 可手动加 role="banner" 强化地标识别，其他层级不必加
IE9+ 兼容和 CSS 选择器陷阱
<header></header> 在 IE9+ 能被解析为 HTML 元素，但原生不支持 CSS 中的 header 选择器——这意味着你写的 header { padding: 1rem; } 在 IE9/10 里根本不会生效。
- 必须引入 html5shiv（通过
<script></script> 加载），并配合 document.createElement('header') 激活
- 更稳妥写法是：用类名驱动样式，比如
<header class="site-header"></header>，然后写 .site-header { ... }
-
<header></header> 默认是 display: block，无 margin、无 padding、不撑高、不清浮动——和 <div> 一样“干净”，所有样式都要显式定义
<li>现代项目若已放弃 IE8–10 支持（2026 年绝大多数情况如此），可跳过 html5shiv，但需确认构建流程里没残留条件注释或 hack 写法</li>
真正容易被忽略的，是语义归属必须对齐节结构：<code><header></header> 本身不创建新节，它只是为最近的节根（如 <section></section>）提供上下文包装。没这个对齐，标签再标准也没用。
<div class="site-header"> 控制布局，再在里面套一层语义正确的 <code><header></header>（且确保它含标题）
<section></section> 或 <div>，别塞进 <code><header></header>
position: fixed 容易触发 iOS Safari 滚动穿透，这不是 <header></header> 的锅，但混用会放大问题：建议优先试 position: sticky，必要时配 JS 补偿多个 <header></header> 可以共存，但归属必须清晰
一个页面可以有好几个 <header></header>，前提是每个都明确服务于某个节（、<article></article>、<section></section>），而不是堆叠或悬空。
- 顶层
<header></header>在直系子层，含<h1></h1>+<nav></nav>→ 代表整站入口 - 某篇
<article></article>开头另起一个<header></header>，含<h2></h2>+<time></time>+<p class="byline"></p>→ 服务该文章上下文 - 禁止：
<header></header>嵌套在<footer></footer>里、<header></header>套<header></header>、<header></header>放在<main></main>外又不包裹任何节元素——语义归属断裂，浏览器会忽略内层结构 - 最外层
<header></header>可手动加role="banner"强化地标识别，其他层级不必加
IE9+ 兼容和 CSS 选择器陷阱
<header></header> 在 IE9+ 能被解析为 HTML 元素，但原生不支持 CSS 中的 header 选择器——这意味着你写的 header { padding: 1rem; } 在 IE9/10 里根本不会生效。
- 必须引入 html5shiv（通过
<script></script>加载），并配合document.createElement('header')激活 - 更稳妥写法是：用类名驱动样式，比如
<header class="site-header"></header>，然后写.site-header { ... } -
<header></header>默认是display: block，无 margin、无 padding、不撑高、不清浮动——和<div> 一样“干净”，所有样式都要显式定义 <li>现代项目若已放弃 IE8–10 支持（2026 年绝大多数情况如此），可跳过 html5shiv，但需确认构建流程里没残留条件注释或 hack 写法</li> 真正容易被忽略的，是语义归属必须对齐节结构：<code><header></header>本身不创建新节，它只是为最近的节根（如或<section></section>）提供上下文包装。没这个对齐，标签再标准也没用。
