header标签具有语义与性能双重作用：必须置于body或sectioning元素内，避免嵌套div和未闭合标签，多个header需明确层级边界，h1须唯一且贴近顶部，缺失lang、alt等属性会隐性拖慢性能。

header 标签不是“加个样式容器”那么简单——浏览器会基于它提前调度导航资源、识别首屏关键内容、跳过非必要 DOM 遍历。用错位置或嵌套滥用，反而拖慢解析。

header 必须紧贴 body 或 sectioning 元素内部

浏览器只在 、<article></article>、<section></section>、<aside></aside> 这类节根（sectioning root）或节元素（sectioning content）内识别 header 的语义作用。把它塞进 <div> 或 <code><span></span> 里，就退化成普通容器，失去所有预判能力。

• ✅ 正确：<header>...</header> 或 <article><header>...</header><p>正文</p></article>
• ❌ 错误：<div class="wrapper"><header>...</header></div> —— 浏览器无法将其与文档结构关联
• ⚠️ 注意：<main></main> 不是节元素，不能作为 header 的直接父级；若需为 main 加头部，应包裹在 <section></section> 内再放 header

header 内避免嵌套冗余 div 和未闭合标签

每个额外的 <div> 都会增加 DOM 节点数和样式匹配开销。浏览器解析 <code>header 时，若发现深层嵌套或缺失结束标签（如漏写 ），会触发容错重排，延迟首屏渲染。

立即学习“前端免费学习笔记（深入）”；

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 删掉无意义包装：<div class="nav-wrapper"><nav>...</nav></div> → 直接用 <nav>...</nav>
• 确保 nav、form、img 等子元素都闭合完整；img 必须带 width/height 属性，否则触发 layout shift 并阻塞解析流
• 不要在 header 里放 <script></script> 或 <style></style> 块——它们该在 或 底部

多个 header 的语义边界必须清晰

一个页面可以有多个 header，但每个都必须对应明确的节上下文。混用会导致浏览器无法区分“全局页眉”和“文章标题栏”，进而影响资源优先级判断和 SEO 权重分配。

• 顶级 header：放在 下，仅含品牌标识、主导航、搜索框等跨页面通用内容
• 区块级 header：只能出现在 <article></article> 或 <section></section> 内部，且应只含该区块专属信息（如文章标题 <h2></h2>、作者、发布时间 <time></time>）
• 禁止在 <footer></footer> 或 <aside></aside> 内部再嵌 header —— W3C 明确不推荐，会被视为结构错误

header 中的 h1 使用必须唯一且贴近顶部

搜索引擎和辅助技术依赖 header 内首个 <h1></h1> 判断页面主主题。若它被埋在多层 div 后、或与 logo 图片分离、或出现多次，会显著降低语义可信度。

• ✅ 推荐：<header><h1><a href="/">我的网站</a></h1> <nav>...</nav></header>
• ❌ 风险操作：<header><div><div><h1>标题</h1></div></div></header>（嵌套过深）
• ⚠️ 注意：同一页面只能有一个 <h1></h1> 出现在顶级 header 中；区块级 header 只能用 <h2></h2> 及以下

真正卡性能的往往不是标签名本身，而是 header 周围的 DOM 关系和属性缺失——比如没设 lang 导致字体回退延迟，或 img 缺 alt 引发可访问性重算。这些细节不会报错，但会在 Lighthouse 的 Performance 和 Accessibility 分项里悄悄扣分。