是语义化头部标签，应用于含 logo、主标题、主导航等入口内容的区域；应配合 、 使用，不可嵌套或滥用，且需确保结构准确以支持无障碍和 seo。
<header></header> 是网页头部区域的首选标签，但不能单独使用它包揽全部内容；必须配合 <nav></nav>、<h1></h1> 等语义化元素协同组织结构。
什么时候该用 <header></header>，而不是 <div class="header">
<p>当顶部区域包含介绍性或导航性内容（如 Logo、主标题、主导航链接、搜索框）时，就该用 <code><header></header>。它不是视觉容器，而是语义声明——浏览器和屏幕阅读器会据此识别“这是页面入口”，SEO 也能更准确抓取核心信息。而 <div class="header"> 只是普通分组，class 名称一旦写错（比如 <code>class="top-bar"），语义就彻底丢失，后续维护或无障碍支持都会出问题。
<header></header> 里该放什么，不该放什么
<header></header> 里该放什么，不该放什么应放：<h1></h1>（页面主标题）、<nav></nav>（仅主导航）、Logo 图片（带 alt 属性）、搜索表单（<form></form> + <input type="search">）
不应放：<main></main>（与头部逻辑冲突）、多个 <nav></nav>（除非有明确区分，如“主导航”和“用户登录导航”，此时建议用 aria-label 标注）、广告横幅（属于干扰内容，应移至 <aside></aside> 或独立区块）
注意：<header></header> 可以嵌套在 <article></article> 或 <section></section> 内部，用于局部头部（如一篇博客文稿自己的标题区），但每个 <header></header> 都必须与其父级内容直接相关。
常见错误：滥用、嵌套错位、忽略可访问性
- 错误地把整个顶部通栏（含 banner 图、促销条、多级菜单）全塞进一个
<header></header>—— 这会让语义过载，应拆分为<header></header>+<section></section>或<aside></aside> - 在
<header></header>里再套一层<header></header>—— HTML 规范禁止嵌套<header></header>，会导致解析异常和辅助设备误读 - 用了
<header></header>却没配<nav></nav>，而是把导航写成无序列表加 class —— 导航语义断裂，键盘用户无法用快捷键跳转到导航区 - 忽略
<h1></h1>层级：页面只有一个<h1></h1>，且应在<header></header>内；若用<h2></h2>替代，屏幕阅读器可能无法准确定位主标题
兼容性与降级处理要点
IE8 及更早版本不识别 <header></header> 等 HTML5 标签，但现代项目基本无需支持；若需兼容，只需一行 CSS：header { display: block; }，无需 JavaScript 模拟。真正要注意的是语义降级：即使样式失效，结构仍要可读——比如不要依赖 CSS 隐藏 <h1></h1> 来“假装没有标题”，这会让无障碍工具完全丢失上下文。
最易被忽略的一点：语义标签本身不提供默认样式，也不自动提升 SEO 排名；它的价值只在“结构正确”时才生效——如果 <header></header> 里塞了无关内容，或者 <nav></nav> 包裹了非导航链接，那语义就塌了，再标准的标签也没用。
