必须包含heading元素以确保语义完整，仅含导航或搜索框而无标题即失效；主导航与站点标题应共存于同一，侧边栏导航则用独立；禁止嵌套，且role="banner"仅限顶级唯一使用。
<header></header> 不是“网页最上面那块儿”的通用容器，它只在包裹真正具有「引导性语义」的内容时才该出现——比如 <h1></h1> + <nav></nav>、或文章标题 + 作者信息。单独套一层 <header></header> 却不放标题，等于告诉屏幕阅读器“这儿有个页眉”，但实际什么都没说清楚。
必须包含 heading 元素，否则语义断裂
一个空的 <header></header> 或仅含 <nav></nav> 和 <img alt="如何定义网页头部区域_HEADER标签组织导航与Logo信息" > 的 <header></header> 没有可访问性价值。辅助技术依赖内部的 <h1></h1>～<h6></h6> 来建立文档大纲。
- ✅ 正确：
<header><h1>我的网站</h1> <nav>...</nav></header> - ❌ 错误：
<header><div class="logo">...</div> <nav>...</nav></header>（无 heading） - ⚠️ 注意：
<hgroup></hgroup>已被废弃，多级标题改用<h1></h1>+<p class="subtitle"></p>
导航要不要塞进 <header></header>？看它是否属于“该区域的引导内容”
如果导航是为整个页面服务的（如主导航），且和站点标题/Logo 在同一逻辑单元里，就该放在 <header></header> 内部；但如果只是侧边栏里的分类导航，或卡片组件内的操作入口，那就该用独立的 <nav></nav>，甚至 <menu></menu>。
- 主导航 + 站点标题 → 放进同一个
<header></header> - 仅导航栏（无 logo、无标题）→ 用
<nav></nav>即可，不必硬套<header></header> - 搜索框 → 可以放在
<header></header>内，但别塞进<nav></nav>；更规范的做法是<div role="search"> 或 <code><form></form>多个
<header></header>是允许的，但不能嵌套你可以在
<article></article>里用一个<header></header>，在<section></section>里再用一个，只要每个都对应其所在区块的引导性内容。但以下写法是非法的：- ❌
<header><header>...</header></header>（嵌套禁止） - ❌
<header></header>套在<footer></footer>或<address></address>里面 - ✅ 页面级
<header role="banner"></header>+ 文章内<header></header>（两个独立、层级不同）
加
role="banner"是可选增强，但只应在顶级<header></header>上使用，且确保全页唯一。别用
<header></header>解决 CSS 布局问题有人把
<header></header>当成“顶部固定区域”的语义化<div>，然后疯狂写 <code>position: fixed; top: 0;。这会导致：- 缩放或高对比度模式下，
<header></header>默认的流式行为与定位冲突 - 滚动性能受影响（尤其没设
contain: layout paint时） - 视觉位置 ≠ 语义位置，SEO 和无障碍结构错乱
正确做法：用
<div class="site-header"> 控制布局，需要语义时再在外层或内部加 <code><header></header>。 真正容易被忽略的点是：每个<header></header>都得有明确归属——它到底在为谁提供引导？是整页？某篇文章？还是某个<section></section>？没想清这点，<header></header>就只是个带语义外壳的 div。 - ❌
