header不能嵌套在footer等非节元素内，必须依附body、article、section或aside等节元素；脱离节上下文则语义丢失，屏幕阅读器忽略或降级处理，w3c明确禁止header与footer互为直接子元素。

header 不能嵌套在 footer 或其他非节元素内部

浏览器不会报错，但语义彻底丢失——<footer><header></header></footer> 这种写法会让屏幕阅读器忽略内层 header，或将其降级为普通 div。W3C 明确禁止 header 和 footer 互相作为直接子元素，因为它们是平级语义单元，不是父子关系。

常见错误场景：

• 把版权信息或“返回顶部”按钮塞进 header 里，再试图用 footer 包一层做“页眉底部栏”——应改用 <small></small> 或普通 <div> 加语义类名 <li>在 <code><nav></nav> 或 <main></main> 内部直接写 <header></header>——main 是顶级 landmark，不允许被任何语义容器包裹；nav 本身已是导航作用域，不需要额外 header
• 用 <div class="page-header"></div> 包着 <header></header>——外层 div 没有节上下文，导致 header 语义悬空，辅助技术无法判断它服务哪个区块

多层 header 共存的前提：必须各自依附明确的节元素

一个页面可以有多个 header，但每个都得有归属：要么是 直系子元素（全局页眉），要么嵌套在 <article></article>、<section></section> 或 <aside></aside> 内部（局部页眉）。脱离节上下文的 header 不产生语义价值。

典型合法结构：

• <header>全站 logo + 导航</header><main><article><header><h2>文章标题</h2> <time>2026-06-17</time></header>...</article></main>
• <section><header><h3>章节标题</h3> <p>副标题说明</p></header><p>内容...</p></section>

关键判断点：删掉这个 header，它包裹的内容是否仍能清晰表达所属区块的主题？如果不能，说明它不该存在；如果能，那它可能只是样式容器，用 div 更合适。


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载

header 内容必须含引导性信息，否则语义断裂

单独一个 <header></header> 标签不构成有效语义。它必须包裹实际承担介绍、导航或元数据功能的内容，比如 <h1></h1>～<h6></h6>、<nav></nav>、<time></time>、作者行等。没有标题或导航的 header 等于语义断连，Lighthouse 和 axe 工具会标记为“空语义容器”。

哪些内容适合放进去：

• <h2>博客标题</h2><p class="byline">作者：张三 · <time datetime="2026-06-17">今天</time></p>

• <h3>配置说明</h3> <nav><ul>...</ul></nav>

哪些应该避免：

• 纯装饰性图标或广告位
• 正文第一段（应归入 <main> 或 <code><article></article> 主体）
• 表单控件（<form></form> 自带语义，无需 header 包裹）

动态渲染时 header 的复用与替换风险

SPA 页面切换路由时，常犯的错误是销毁旧 article 并新建一个，连带把里面的 <header></header> 也整个替换。这会导致：

• 辅助技术重新解析整个区块，可能跳过标题层级缓存
• SEO 抓取器认为内容重复或结构不稳定
• 浏览器 history API 与 heading 大纲错位

更稳妥的做法：

• 复用已有 <article></article> 容器，只更新其内部 <header></header> 和 <main></main> 内容
• 确保新 <header></header> 中的 <h2></h2> 或 <h3></h3> 级别与原结构一致，避免大纲跳跃
• 不要在 JS 中用 document.createElement('header') 动态插入后忽略父级节上下文——必须确认它被 append 到 <article></article> 或 <section></section> 内，而非 <div id="app"></div> 这类无语义根节点

最易被忽略的是：结构合法性 ≠ 渲染可见性。很多嵌套错误浏览器能“容错显示”，但一接入读屏器、自动化审计或搜索引擎，语义断层立刻暴露。检查时重点盯住 header 的父元素是不是 body、article、section 或 aside，而不是它看起来有没有“在页面顶部”。