<header>和<footer>是语义化区块标签，必须嵌套在<body>等容器内，不能与<body>并列；一个语义区块内通常只用一个<header>或<footer>，分别表示起始引导内容和补充性结尾信息。

<header>、<body>、<footer> 并不是并列的结构标签——<body> 是 HTML 文档的必需容器，而 <header> 和 <footer> 是语义化区块标签，必须嵌套在 <body>（或 <article>、<section> 等）内部，不能替代或平行于 <body>。真正需要厘清的是：如何在 <body> 内合理使用 <header> 和 <footer> 来组织内容结构。

---

header 标签该放在哪儿？

• <header> 必须作为某个语义容器的直接子元素，例如：

  • <body> 的直接子级 → 表示整个页面的顶部引导区（含 logo、主导航、搜索框）
  • <article> 内部 → 表示这篇文章的标题、作者、发布时间等元信息
  • <section> 或 <aside> 内部 → 表示该局部区块的介绍性内容（如“数据说明”小节的标题与简介）

• 不要把它当样式盒子用：

  • 禁止只为居中一段文字或加背景色而包裹 <header>
  • 禁止连续嵌套多个 <header>（比如 <header><header>...</header></header>），这会混淆内容层级

• 一个语义区块内通常只用一个 <header>
  它代表“该区块的起始引导内容”，重复使用会让屏幕阅读器难以判断主次

---

footer 标签不是“页面最底下”的视觉占位符

• <footer> 的语义是“补充性结尾信息”，不是视觉位置决定的：

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

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 全局版权信息应放在 <body> 的末尾，作为其直接子元素
  • 每个 <article> 可自带 <footer>，比如“标签 | 编辑时间 | 原文链接”
  • <section> 下若需注明数据来源或更新说明，也可设 <footer>，但优先考虑用 <small> 或 <aside>（如果信息较轻量）

• <footer> 与 <header> 平级，互不嵌套：

  • <header><footer>...</footer></header> 是无效 HTML5 结构，浏览器可能忽略或降级处理
  • 辅助技术会跳过或误读这种嵌套，影响可访问性

• 不是所有结尾区域都该用 <footer>：

  • 判断标准是：这部分内容是否属于“该区块的归属、补充或收尾说明”
  • 纯装饰性分隔线、空白占位、视觉页脚导航栏（无版权/联系信息），更适合用 <div role="contentinfo"> 或普通 <div>

---

body 是唯一根容器，header 和 footer 都依附于它

• <body> 是文档主体的强制根节点，所有可见内容必须在其内部
• <header> 和 <footer> 是 <body> 的合法子元素，但不是必需的
• 一个页面可以有多个 <header> 和多个 <footer>，只要它们各自归属明确：
  • <body><header>...</header><main>...<article><header>...</header>...</article></main><footer>...</footer></body>
• <nav> 通常放在 <header> 内（如主导航），但也可独立存在（如侧边导航菜单），只要语义清晰

---

实际写法建议（简洁可靠）

• 页面级结构推荐这样组织：

  <body>
  <header>
    <h1>网站名称</h1>
    <nav>主导航链接</nav>
    <form>搜索框</form>
  </header>
  
  <main>
    <article>
      <header>
        <h2>文章标题</h2>
        <p>作者：张三 · 发布于 2026-06-15</p>
      </header>
      <p>正文内容...</p>
      <footer>
        <p>标签：HTML5, 语义化 · 编辑于 2026-06-16</p>
      </footer>
    </article>
  </main>
  
  <footer>
    <p>&copy; 2026 版权所有</p>
    <p><a href="/privacy">隐私政策</a> | <a href="/contact">联系我们</a></p>
  </footer>
  </body>

• 避免常见错误：

  • 把 <header> 当 div 用，里面只放一个 <p> 或 <span>
  • 在 <header> 里塞 <footer>，或反过来
  • 给每个卡片、按钮、段落都套 <header>，破坏语义密度
  • 忽略 <main> 的唯一性，导致 SEO 和可访问性受损

不复杂但容易忽略