<header> 是 HTML5 语义化标签，表示页眉区域，用于结构描述而非样式；适用于网站 logo、导航等引导性内容，可嵌套于 <article> 等元素中，禁止嵌套自身，现代浏览器完全支持，IE9+ 可识别，需 html5shiv 兼容 IE8。
<header> 是 HTML5 引入的语义化标签，用来表示一个页面或某个区块的**页眉区域**。它本身不带任何默认样式或行为，纯粹用于结构描述——浏览器和辅助技术（比如读屏软件）会据此理解“这部分内容是头部导航、标题或入口信息”。
什么时候该用 <header>，而不是 <div>
关键看内容是否承担「引导性、标识性、入口性」功能：
- 页面顶部包含网站 logo、主导航菜单、搜索框 —— 适合用
<header> - 一篇文章开头有标题、作者、发布时间 —— 可以在
<article>内部嵌套一个<header> - 只是用来做视觉分隔、加个背景色的容器 —— 用
<div>更合适，强行套<header>会误导语义 - 一个页面里可以有多个
<header>，但每个都应有明确的归属上下文（如<section>或<article>）
<header> 里能放什么？常见误用点
它允许包含大多数流内容（flow content），但不能嵌套另一个 <header> 或 <footer>：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 允许：
<h1>～<h6>、<nav>、<p>、<img>、<button> - ❌ 禁止：
<header>套<header>（嵌套页眉无意义） - ⚠️ 注意：
<header>不自动包含 ARIA role，如果内部没有可聚焦元素（如链接、按钮），屏幕阅读器可能不会主动播报；建议配合role="banner"（仅用于最外层页眉）或确保有导航锚点
CSS 样式和兼容性要注意什么？
<header> 在所有现代浏览器中完全支持，IE9+ 也能识别并正确解析，但 IE8 及更早版本会把它当普通未知标签，需要 document.createElement('header') 或引入 html5shiv 才能触发样式渲染：
立即学习“前端免费学习笔记（深入）”；
- CSS 中直接写
header { }即可生效，无需额外声明 display 属性（默认是display: block） - 不要依赖
<header>自带 margin/padding —— 它和<div>一样“干净”，所有样式需显式定义 - 若用 CSS Grid/Flex 布局，
<header>和<div>行为完全一致，选哪个只影响语义，不影响布局能力
真正容易被忽略的是：语义标签的价值不在视觉，而在结构表达。一个没写 <header> 的页面照样能跑，但加了之后，搜索引擎更容易抓取主干导航，残障用户能更快跳转到顶部功能区——这些效果不会立刻显现，但会在特定场景里突然变得关键。
