必须包含至少一个标题级元素（–），否则语义断裂——对读屏软件来说，它就等于不存在；空无标题、无导航锚点，浏览器和辅助技术无法构建内容导航树，导致区块被跳过，Lighthouse报错“Heading elements not structured”或“Missing main landmark”。
<header></header> 必须包含至少一个标题级元素（<h1></h1>–<h6></h6>），否则语义断裂——对读屏软件来说，它就等于不存在。
为什么空 <header></header> 会破坏可访问性
浏览器和辅助技术依赖标题层级建立内容导航树。<header></header>本身不带 role，也不自动触发播报；如果里面只有 <img alt="HTML页眉header包含什么_HTML网站顶部结构设计" >、<p></p> 或纯 <nav></nav>，屏幕阅读器很可能跳过整个区块。Lighthouse 也会报 “Heading elements are not structured in a logical order” 或 “Document doesn’t have a main landmark”。
常见误用场景：
- 只放 logo 图片（没
alt或没标题） - 仅含主导航
<nav></nav>，但没包裹在带标题的上下文里 - 用
<header></header>套一个背景色 div，里面全是 CSS 定位的按钮和 banner
<header></header> 里能放什么、不能放什么
它不是收纳盒，是语义锚点。合法内容必须服务于“识别当前上下文”这个目的。
立即学习“前端免费学习笔记（深入）”；
✅ 允许的内容：
-
<h1></h1>–<h6></h6>（每个<header></header>推荐只含一个主标题） -
<nav></nav>（建议加aria-label区分用途，比如aria-label="主导航"） -
<img alt="HTML页眉header包含什么_HTML网站顶部结构设计" >（必须带语义化alt，如alt="XX 博客"） -
<form></form>（仅限搜索框这类轻量交互，别塞登录表单） -
<time></time>、<address></address>等元信息（尤其适合文章页的局部<header></header>）
❌ 明确禁止：
- 嵌套另一个
<header></header>（浏览器会忽略内层语义） - 放在
<footer></footer>外部又没被<section></section>或<article></article>包裹 - 塞广告横幅、客服浮窗、多语言切换器（这些属于界面控件，用
<div role="complementary"> 更合适） <h3>多个 <code><header></header>怎么组织才不混乱一个页面可以有多个
<header></header>，但每个都必须绑定明确的作用域。关键看它属于谁。典型结构：
- 最外层
<header></header>：放在直接子级，含网站 logo + 主导航，可加role="banner" - 每篇
<article></article>内部的<header></header>：只放该文章的<h1></h1>+ 作者 +<time></time>，不出现全站导航 -
<section></section>开头的<header></header>：比如“相关推荐”区块顶部放个<h2>你可能还喜欢</h2>，这就够了
容易踩的坑：
- 把所有顶部视觉模块（轮播图、通知条、广告）全塞进第一个
<header></header>—— 它们不属于“文档头部”，应拆成独立<section></section> - 在
<main></main>外、下并列写两个无归属的<header></header>—— 结构断裂，SEO 工具无法判断主次
兼容性和样式控制要注意什么
<header></header>是纯语义标签，无默认样式，也不影响布局流。但它在 IE9+ 和所有现代浏览器中都能被正确解析（IE8 需document.createElement("header")补丁，2026 年基本可忽略）。样式实操建议：
- 用 CSS 控制高度、背景、padding，但别靠它“撑开”布局 —— 如果只是为了视觉占位，
<div> 更诚实 <li>响应式中，<code><nav></nav>折叠逻辑要跟<header></header>解耦，别把 hamburger 菜单状态硬绑在<header></header>上 - 避免给
<header></header>设display: contents—— 会剥离其语义容器作用，读屏软件直接看不见
真正难的不是怎么写，而是每次加一个
<header></header>之前，先问一句：这里有没有一个标题？它服务的是哪个内容单元？没有答案，就别用。 - 最外层
