是语义化必需标签，用于标记页面或区块的入口区域，必须含标题、导航或搜索框等引导性内容，禁止嵌套、滥用为布局容器或塞入轮播图、广告。
<header></header> 是唯一适合标记网页头部的语义化标签，不是可选项，而是结构必需项。它明确告诉浏览器、搜索引擎和读屏工具：“这部分是页面或区块的顶部入口区域”，比 <div class="header"> 多出三层价值：可访问性跳转支持、SEO 权重识别、代码意图即刻可读。
<h3>什么时候该用 <code><header></header>？
不是所有“看起来像头部”的区域都该套 <header></header>。它的使用有明确边界：
- 页面最外层顶部（如 logo + 主导航 + 搜索框）——必须用
<header></header> - 一个
<article></article>或<section></section>内部的局部标题区（比如文章标题+作者+发布时间）——也该用<header></header>，这是合法且推荐的嵌套用法 - 仅包含装饰性图片或无关 banner 的横幅条 —— 不该用，应改用
<div> 或 <code><figure></figure> - 页脚上方的“相关链接”区块 —— 属于辅助内容，用
<section></section>或<aside></aside>更准确 - ✅ 推荐放入：
<h1></h1>（页面主标题）、<nav></nav>（主导航）、<img>（logo）、<form></form>（站内搜索） - ❌ 避免放入：
<footer></footer>（语义冲突）、<main></main>（逻辑越界）、广告位（应归入<aside></aside>或独立<section></section>） - ⚠️ 注意嵌套层级：
<nav></nav>可直接子级放在<header></header>内，但不要把整个导航菜单写成<header><nav><div class="menu-wrapper">... —— <code><div> 在这里已无语义必要 <h3>兼容旧浏览器时怎么处理？</h3> <p>IE8 及更早版本不识别 <code><header></header>等 HTML5 标签，但问题不在标签本身，而在 CSS 渲染和 DOM 行为：- 必须引入
html5shiv.js（通过<script></script>在中加载），否则 IE8 会把<header></header>当作未知元素，不应用 CSS 样式 - 即使加了 shiv，仍需给
<header></header>显式声明display: block（现代 CSS 重置库如 Normalize.css 已内置，但自定义样式表中若未覆盖，可能漏掉） - 不要用
document.createElement("header")手动修复 —— shiv 已做这件事，重复调用无意义还可能干扰
真正容易被忽略的点是：一个页面可以有多个
<header></header>，但每个都必须服务于明确的“顶部引导”目的；滥用它去包裹任意顶部视觉区块，反而会稀释语义，让读屏器用户迷失重点。 - 必须引入
<header></header> 里该放什么，不该放什么？
<header></header> 的内容应聚焦“引导进入”功能，而非堆砌全部顶部元素：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
