首页 > 文章 > 前端

HTML5中header标签的使用方法

时间：2026-04-29 12:45:55 376浏览收藏

HTML5中的`
`标签并非简单的装饰性容器或“放标题的盒子”，而是一个具有明确语义的结构元素，专用于包裹介绍性或导航性内容——无论是整个页面的页眉，还是文章、章节内部的局部头部；只有当其中包含标题、Logo、导航栏、作者信息、发布日期等实质性内容时才应使用，纯样式布局或误嵌套于`
`或另一`
`中均属语义滥用；需特别注意它已取代过时的``，且在可访问性上直接影响屏幕阅读器识别（如自动赋予`role="banner"`），用错不仅削弱SEO与无障碍体验，甚至比不用更糟糕。

HTML中header用法_HTML5如何定义页面或区域的头部

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

或

内部的局部头部。

什么时候该用
而不是

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

才是合适选择：

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

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

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

更准确。

可以嵌套，但不能乱嵌

一个页面可以有多个

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

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

常见错误：

或

。

和的关系已经过时

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

直接用
+
或
包副标题
若需隐藏副标题对大纲的影响，用 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 和无障碍体验。

好了，本文到此结束，带大家了解了《HTML5中header标签的使用方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

资料下载

编程学习资料下载

精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。

立即下载