header标签是HTML5语义化标签，用于定义文档或区域的页眉，可多次使用于页面、文章或区块中，提升可读性、SEO和无障碍访问，不可嵌套于footer、address或其他header内，现代浏览器支持良好，IE9以下需兼容处理。
header 标签是 HTML5 中引入的语义化标签之一，用于定义文档或某个区域的页眉部分。它并不只是指整个页面顶部的横幅，也可以用在文章、侧边栏甚至卡片组件中作为局部标题区域。合理使用 header 不仅提升代码可读性，也有利于 SEO 和无障碍访问。
header 标签的基本语法
header 是一个块级元素，通常包含介绍性的内容，比如标题、Logo、导航链接或作者信息。基本写法如下：
<header><h1>网站标题</h1>
<p>欢迎来到我的网页</p>
</header>
它可以出现在页面的主体中多次，但不能嵌套在 footer、address 或另一个 header 内部。
常见使用场景与布局应用
header 的灵活性使其适用于多种结构布局：
立即学习“前端免费学习笔记（深入）”；
- 页面级页眉：放在 body 开头，包含网站 Logo、主导航菜单和搜索框。
- 文章页眉：在 article 元素内使用，展示标题、作者、发布时间等信息。
- 区块页眉：用于 aside 或 section 中，标识某部分内容的标题区域。
示例：在一个博客文章中：
<article>
<header>
<h2>HTML header 标签详解</h2>
<p>作者：张三 发布时间：2024-04-01</p>
</header>
<p>正文内容……</p>
</article>
与 div 的区别及语义优势
过去开发者常用 div class="header" 实现页眉，而 header 提供了明确的语义含义。屏幕阅读器能识别 header 并帮助视障用户快速定位导航区域。搜索引擎也能更好理解页面结构，提升内容权重判断。
对比：
<!-- 无语义 --><div class="header">
<h1>标题</h1>
</div>
<!-- 有语义 -->
<header>
<h1>标题</h1>
</header>
推荐优先使用语义化标签，提升代码质量与可维护性。
注意事项与兼容性
现代浏览器均支持 header 标签，但在老版本 IE（IE9 以下）中无法识别，需引入 html5shiv 等兼容脚本。同时注意：
- 不要用 header 包裹整个页面头部图片或轮播图，除非其中包含介绍性内容。
- 避免在一个 section 或 article 中使用多个 header，除非结构确实需要。
- 通常不包含 footer 或主内容区域。
基本上就这些，正确使用 header 能让页面结构更清晰，布局更规范。不复杂但容易忽略细节。
