是语义化元素，表示介绍性或导航性内容，可用于页面、或内部；仅当含标题、导航、作者信息等时使用，纯样式布局应选；禁止嵌套或误用于页脚；已废弃。

<header></header> 不是“放标题的盒子”，也不是必须出现在页面最顶部的装饰性容器。它是一个有明确语义的结构元素，表示「一组介绍性或导航性内容」——可以是整个页面的页眉，也可以是 <article></article> 或 <section></section> 内部的局部头部。

什么时候该用 <header></header> 而不是 <div> <p>当你包裹的内容满足以下任一条件时，<code><header></header> 才是合适选择：

• 包含 <h1></h1>–<h6></h6> 标题 + 网站 Logo / 副标题 / 时间信息等介绍性文字
• 内部嵌套了 <nav></nav>（比如主导航栏）
• 作为某篇 <article></article> 的开头区块，含该文章的标题、作者、发布日期
• 出现在 <section></section> 里，且该 <section></section> 本身有独立主题（如“第三章：性能优化”，其 <header></header> 含 <h2></h2> 和简介）

纯为了布局对齐、加背景色、或仅放一个按钮而套 <header></header>，属于语义滥用——这时候用 <div> 更准确。 <h3> <code><header></header> 可以嵌套，但不能乱嵌

一个页面可以有多个 <header></header>，但它们必须各自归属清晰：

立即学习“前端免费学习笔记（深入）”；

• 顶层 <header></header> 在 下，作为整页入口
• <article></article> 内可再有一个 <header></header>，只服务这篇文章
• <section></section> 内也可有 <header></header>，但需配 <h2></h2> 或更高级别标题
• 禁止把 <header></header> 塞进 <footer></footer> 或另一个 <header></header> 里——没有语义支撑，浏览器和读屏器会忽略其结构意义

常见错误：<header><header>...</header></header> 连写两层，或者在页脚区域写 <header>© 2026 公司版权</header> ——这违反定义，应改用 <p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 或 <div>。 <h3>和 <code><hgroup></hgroup> 的关系已经过时

<hgroup></hgroup> 曾用于把主标题和副标题包在一起（避免影响大纲层级），但它在 HTML5.2 中已被废弃，主流浏览器不再推荐使用。现在正确做法是：

• 直接用 <h1></h1> + <p></p> 或 <div> 包副标题 <li>若需隐藏副标题对大纲的影响，用 <code>aria-hidden="true" 或 CSS visually-hidden 类
• 不要依赖 <hgroup></hgroup>，W3C 验证器会警告，部分读屏器也不识别

示例（推荐）：

<header>
  <h1>前端性能优化指南</h1>
  <p class="subtitle">2026 年最新实践与避坑清单</p>
</header>

容易被忽略的兼容性与可访问性细节

<header></header> 本身不带默认样式，但它的语义会影响辅助技术的行为：

• 屏幕阅读器会将 <header></header> 识别为「banner」角色（role="banner"），用户可通过快捷键跳转到它
• 如果页面有多个 <header></header>，只有最外层那个会被视为全局 banner；其余的不会自动获得 role，需手动加 role="region" 并配 aria-labelledby 才能被正确识别
• IE11 及更早版本不原生支持 <header></header>，若需兼容，得用 document.createElement('header') 激活，或引入 html5shiv

真正关键的不是“能不能用”，而是“用对没用对”——语义错位比不用更伤 SEO 和无障碍体验。