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

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

---

header 标签该放在哪儿？

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

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

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

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

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

---

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

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

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

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

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

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

  • 判断标准是：这部分内容是否属于“该区块的归属、补充或收尾说明”
  • 纯装饰性分隔线、空白占位、视觉页脚导航栏（无版权/联系信息），更适合用 <div role="contentinfo"> 或普通 <code><div> <hr> <h3>body 是唯一根容器，header 和 footer 都依附于它</h3> <ul> <li> <code> 是文档主体的强制根节点，所有可见内容必须在其内部
  • <header></header> 和 <footer></footer> 是 的合法子元素，但不是必需的
  • 一个页面可以有多个 <header></header> 和多个 <footer></footer>，只要它们各自归属明确：
    • <header>...</header><main>...<article><header>...</header>...</article></main><footer>...</footer>
  • <nav></nav> 通常放在 <header></header> 内（如主导航），但也可独立存在（如侧边导航菜单），只要语义清晰

  ---

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

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

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

  • 避免常见错误：

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

  不复杂但容易忽略