<header> 是语义化页眉容器，仅当包含标题（如 <h1>）及导航、logo 等引导性内容时才应使用；无标题即无效，不可滥用为视觉装饰，须确保可访问性与 SEO 结构正确。
<header> 不是用来“撑顶部高度”或“套个背景色”的视觉容器，它的作用是告诉浏览器、搜索引擎和读屏软件：“这一块内容，在语义上是当前范围的页眉”。没这个语义，就别用它。
什么时候必须用 <header>？
只有当内部包含明确的「引导性标题内容」时才成立：
- 页面最外层有
<h1>+<nav>+ logo（非图片占位，而是带alt的品牌标识） - 一个
<article>或<section>开头有<h2>+ 作者 + 发布时间 - 你希望屏幕阅读器把这块内容识别为“banner”区域（此时建议加
role="banner"，仅限最外层）
如果只是顶部放了个轮播图、广告横幅或登录按钮弹窗，<header> 就是错的——用 <div> 或更精确的 <section> 更合适。
为什么单独写 <header></header> 是无效的？
它不自动产生语义价值，也不自带可访问性意义。常见错误现象：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 读屏软件只报“header”，然后沉默——因为里面没有可聚焦元素或标题
- SEO 工具显示结构混乱，多个
<header>嵌套但无对应<h1>–<h6> - WAVE 或 axe 插件提示 “Missing heading in landmark”
正确做法：每个 <header> 至少包裹一个标题级元素（<h1>～<h6> 或 <hgroup>），且避免在 <footer>、<address> 或另一个 <header> 内嵌套。
<header> 和 <nav> 能不能只用一个？
能，但要看内容职责：
- 如果顶部只有纯导航链接（无 logo、无标题、无搜索框），
<nav>比<header>更精准——<nav>本身已是语义化地标（landmark） - 如果导航 +
<h1>+ 搜索框都在一起，用<header>包裹，再在内部嵌<nav>，这是标准模式 - 硬把
<nav>当<header>用（比如加 background-color 后当成顶部栏），会丢失“页眉”上下文，对无障碍和结构解析不利
注意：<header> 不强制要求含 <nav>，<nav> 也不一定非得在 <header> 里（比如侧边导航、页脚导航都合法）。
IE8 兼容要怎么处理？
原生 <header> 在 IE9+ 才被识别，IE8 及以下完全忽略语义，只当普通未知标签处理：
- 必须引入
html5shiv（通过<script>加载），否则 CSS 中的header { display: block; }也不会生效 - 即使加了
html5shiv，IE8 仍无法理解 ARIA role（如role="banner"），所以不要依赖它做关键导航逻辑 - 现代项目若已放弃 IE8 支持（2026 年绝大多数生产环境已如此），可直接忽略该兼容层，但需确认团队构建流程中未残留条件注释或 hack 写法
真正容易被忽略的是：很多人加了 html5shiv 却忘了在 <head> 里用 <script> 加载，或者加载顺序错（必须在 CSS 之前），结果样式和语义双失效。
