header必须包裹h1～h6才有语义价值，单独使用无效；需作为body、article、section等节元素的直接子元素，且每个header须归属明确、含匹配上下文的标题，不可嵌套或当布局容器使用。
header 必须包裹 <h1>～<h6> 才有语义价值
单独写 <header></header> 等于没写。屏幕阅读器只读“header”就跳过，Lighthouse 会报 “Missing heading in landmark”，搜索引擎也难以提取页面主结构。
它不是容器占位符，而是为标题提供上下文包装的语义锚点。实际使用中必须满足：
- 页面级
<header>至少含一个与上下文匹配的标题：首页用<h1>（站点名），文章页可用<h1>或<h2>（文章标题） - 嵌套在
<section>或<article>内的<header>，标题级别要降级——不能在子章节里硬塞<h1> -
<hgroup>已废弃，副标题别再用；改用<h2><small>或<h2><span class="subtitle">
header 不能嵌套、不能脱离节元素、不能当 p 用
常见错误是把轮播图、广告横幅、登录弹窗塞进 <header>，哪怕它们视觉上在顶部——这些内容不属于“引导性/导航性”语义，应归入 <section> 或 <aside>。
真正合规的用法取决于归属关系：
立即学习“前端免费学习笔记（深入）”；
- 允许：
<header>直接作为<body>子元素（页面级页眉），或嵌套在<article>、<section>、<aside>内部 - 禁止：
<header>套<header>（浏览器忽略内层节上下文）、放在<footer>外又没包裹任何节元素 - 禁止用
<header>清浮动、撑高度、加背景色——布局需求请用<p class="site-header">，需要语义再额外包一层<header>
移动端 fixed 定位的 <header> 容易触发 iOS Safari 滚动穿透
这不是标签本身的问题，但混用语义与布局会放大风险：比如给 <header> 加 position: fixed + top: 0，再配合表单输入，极易导致底层页面滚动失控。
更稳妥的做法是：
- 优先试
position: sticky（支持度已覆盖所有主流现代浏览器） - 必要时用 JS 补偿：监听
touchmove并阻止默认行为，但仅限<header>内部可滚动区域 - 避免同时设置
contain: layout paint，它可能干扰滚动性能，尤其在长列表页
多个 <header> 可共存，但每个都必须归属清晰
一个页面可以有好几个 <header>，前提是每个都明确服务于某个节元素。例如：
-
<body><header>...</header></body>—— 全局站点导航 -
<article><header><h2>标题</h2><time>...</time></header></article>—— 文章头部元信息 -
<section><header><h3>热门推荐</h3></header></section>—— 区块头部
最容易被忽略的是归属对齐：如果 <header> 悬空在 <body> 下却没包裹任何节元素，它的语义就失效了——它不自动创建新节，必须对齐最近的 <section> 或 <article> 根元素。
文章来自机圈观察员网，发布者：，转载请注明出处：https://www.jqgcy.com/xitongjiaocheng/123926.html
