<header> 是有明确语义边界的结构容器，仅用于主题区块（如页面级头部、文章头部、section标题区）的头部内容；不可仅因视觉位置或样式需求滥用，禁止嵌套或空泛使用。

不要用 <header> 标签包裹整个网页顶部导航栏就完事——它不是语义化的“页头装饰盒”，而是有明确作用边界的结构容器。

什么时候该用 <header> 而不是 <div>

当一段内容是某个“主题区块”的头部时才用 <header>，比如文章标题+作者+发布时间、一个 <section> 的标题区、或者整个页面的站点级头部（logo + 主导航）。它不等于“网页最上面那条横条”——如果只是视觉上靠上、但逻辑上不属于任何内容单元的包装层，用 <div class="top-bar"> 更准确。

• ✅ 正确：整个页面的站点头部（含 logo、主导航）
• ✅ 正确：一篇博客文章开头的标题、副标题、作者信息
• ❌ 错误：仅为了加背景色/固定定位而套一层“头部”
• ❌ 错误：把页脚上方的版权栏也叫成 <header>

<header> 里能放什么？哪些元素会破坏语义

<header> 允许包含标题（<h1>–<h6>）、<nav>、<p>、<logo>（需自定义或用 <img>），但不能嵌套另一个 <header>。常见错误是把它当成“可嵌套容器”：

• ? 不要写：<header><header><h1>标题</h1></header></header>
• ? 不要只放一个 <button> 或 <form> 而无任何标识性内容（如标题或导航）
• ✅ 推荐结构：<header><h1>我的博客</h1><nav>...</nav></header>

多个 <header> 会不会被屏幕阅读器误读？

不会误读，但会按实际嵌套层级播报。浏览器和读屏软件把每个 <header> 当作独立区域处理，所以关键在“是否真有多个逻辑头部”。例如一个 <article> 里再套一个 <header>，读屏时会说“文章头部：……”，而非混淆为页面主头部。

• 影响体验的是内容空泛：比如 <header><p>欢迎光临</p></header>，既无标题也无导航，读屏时只剩“头部区域，段落：欢迎光临”，失去语义价值
• CSS 重置风险：某些 CSS 重置库（如 normalize.css）对 <header> 默认设了 display: block，但没设 margin/padding，若依赖默认间距，可能在不同浏览器中表现不一致

真正容易被忽略的点是：很多人以为用了 <header> 就自动获得 SEO 加分或无障碍支持——其实它只提供基础结构信号，必须配合恰当的标题层级（比如内部要有 <h1> 或合理 <h2>）、可访问的链接文本、以及不脱离上下文的使用位置，才算完成语义闭环。