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

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

或

内部的局部头部。

什么时候该用

而不是

当你包裹的内容满足以下任一条件时，

才是合适选择：

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

纯为了布局对齐、加背景色、或仅放一个按钮而套

，属于语义滥用——这时候用

更准确。

可以嵌套，但不能乱嵌

一个页面可以有多个

，但它们必须各自归属清晰：

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

常见错误：

...

连写两层，或者在页脚区域写

© 2026 公司版权

——这违反定义，应改用

或

。

和

的关系已经过时

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

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

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

示例（推荐）：

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

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

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

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