是语义化“介绍性区域”，可多处使用但须关联明确内容单元，宜含标题、局部导航、元信息；勿塞全站导航、广告等界面控件，避免空标签或结构混用。
header 标签不是“网站顶部大横幅”
<header></header> 是语义化区块，代表一个内容“介绍性区域”，不等于整个页面最上面的 banner。它可出现在 里，也能嵌套在 <article></article> 或 <section></section> 内部——比如一篇博客文章自己的标题、作者、发布时间，就该用独立的 <header></header> 包裹。
适合放的内容：标题、导航、辅助元信息
典型组合包括：
-
<h1></h1>到<h6></h6>（注意：一个<header></header>通常只含一个主标题，避免多个<h1></h1>） -
<nav></nav>（尤其是本区块专用导航，如文章内目录） - 作者名、发布日期、分类标签等与当前内容强相关的元数据
- 搜索框（如果仅服务于本
<section></section>或<article></article>）
别放广告横幅、全站客服入口、多语言切换浮层——这些属于界面控件，语义上不属于“内容头部”，更适合用 <div role="banner"> 或直接 <code><div> + CSS 控制。<h3>常见误用：和 <nav>、<aside> 混用</aside></nav>
</h3>
<p>错误写法：<pre class="brush:php;toolbar:false;"><header>
<nav><!-- 全站主导航 --></nav>
<aside><!-- 右侧推荐栏 --></aside>
</header></pre>这会让屏幕阅读器误判结构层级。正确拆分是：</p>
<ul>
<li>全站主导航 → 独立 <code><nav></nav>（可加 aria-label="main"）
<article><header>...</header></article>
<aside></aside>，不塞进 <header></header>
浏览器对 <header></header> 无默认样式，但某些旧版辅助技术会将其与“页眉”绑定，混用会导致跳转逻辑错乱。
立即学习“前端免费学习笔记（深入）”；
兼容性与 SEO 影响很小，但结构错误会拖累可访问性
所有现代浏览器都支持 <header></header>，连 IE9+ 都能识别。搜索引擎基本不因这个标签单独加分，但若滥用（比如每个按钮都包一层 <header></header>），会导致 HTML 结构扁平化、大纲混乱，影响无障碍工具生成正确的文档树。
真正容易被忽略的是：同一个页面可以有多个 <header></header>，但每个必须服务明确的内容单元；没有内容就不要硬加——空的 <header></header> 不仅多余，还会在 AT（辅助技术）中产生无意义的停顿点。
