必须是 或 / 的直接子元素，分别表示页面级或文章级引导上下文；禁止嵌套、悬空或仅用于样式，否则破坏语义与可访问性。
页面级 <header></header> 必须是
它代表整个文档的引导入口，不是“网页最上面那条横条”的视觉替身，而是语义上归属 的头部上下文。常见错误是把它塞进某个 <div class="wrapper"> 里，导致结构断裂——浏览器和读屏器会丢失它的全局页眉意义。
<ul>
<li>✅ 正确写法：<code><header><h1>我的网站</h1>
<nav>...</nav></header>...
<div class="container"><header>...</header></div> —— 这个 <header></header> 失去语义归属，等同于 <div>
<li>⚠️ 注意：IE9 需要 <code>html5shiv 或 document.createElement('header') 才能识别该标签，否则只当普通未知元素处理文章级 <header></header> 必须嵌在 <article></article> 或 <section></section> 内部
它不表示“页面顶部”，而是某一块独立内容单元的开头信息。比如一篇博客、一个产品卡片、一节教程，只要它有自己标题+元信息（作者/时间/简介），就该用 <header></header> 包裹，而不是堆在 <article></article> 开头随便放几个 <p></p>。
- ✅ 正确写法：
<article><header><h2>标题</h2> <p>作者：张三</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <time>2026-06-18</time></header><p>正文…</p></article> - ❌ 错误写法：
<article><h2>标题</h2> <p>作者：张三</p> <time>2026-06-18</time><p>正文…</p></article>—— 缺少语义包裹，辅助技术无法识别这是该文章的“头部” - ⚠️ 注意：
<header></header>在<article></article>里可以不含<h2></h2>，但若含标题，层级必须与该<article></article>主题一致（比如不能在<article></article>里放<h1></h1>）
<header></header> 里能放什么、哪些操作直接破坏语义
它接受流式内容，但边界很硬。放错东西不会报错，但会让结构失效——搜索引擎可能忽略标题权重，读屏器跳过整块区域。
- ✅ 允许：
<h1></h1>–<h6></h6>、<nav></nav>、<p></p>、<img>（带alt）、<form></form>、<button></button> - ❌ 禁止：
<header><header></header></header>嵌套 —— 内层被忽略，语义重复 - ❌ 禁止：
<footer><header></header></footer>或<header></header>放在<main></main>外又没父节元素 —— 结构悬空，无法归属 - ⚠️ 容易被忽略：
<header></header>默认无 margin/padding，也不自动触发 ARIA role；若内部全是<p></p>和<img>，屏幕阅读器可能跳过 —— 最外层可手动加role="banner"
为什么不能只为样式套 <header></header>
它不是 <div class="header"> 的语义化马甲。当你只是为了 fixed 定位、背景色、padding 或清浮动而用 <code><header></header>，等于告诉浏览器：“这部分内容在逻辑上是引导性入口”，但它实际只是个装饰层。这种滥用会稀释真实页眉的语义权重，让 SEO 和可访问性支持失效。
- ✅ 视觉需求 → 用
<div class="site-header"> + CSS <li>✅ 语义需求 → 用 <code><header></header>，再加 class 控制样式（如header.site-header） - ⚠️ 特别注意：移动端 fixed
<header></header>在 iOS Safari 容易失焦或滚动穿透，这不是标签问题，而是布局逻辑需配合position: sticky或 JS 补偿
真正难的不是写对标签，而是判断“这段内容是否构成某个区块的引导性上下文”。写完
<header></header> 后，问自己一句：删掉它，会不会让这篇文章、这个章节、这个页面的语义结构变得模糊？如果答案是肯定的，那它才站得住。
