header 标签可以嵌套在 footer 标签内，反之亦然吗？

2026-11-04技术老齐

按 HTML 规范，<header> 和 <footer> 不能相互嵌套。浏览器通常仍能解析并显示这类代码，但能显示不代表结构符合规范。

这种嵌套没有特殊的布局效果，也不会把内层元素移到页面顶部或底部。具体外观取决于 CSS。

为什么不能相互嵌套？

HTML 标准对两者的内容模型作了相同限制：

<header> 内不能包含任何 <header> 或 <footer> 后代元素。
<footer> 内不能包含任何 <header> 或 <footer> 后代元素。

“后代”包括所有嵌套层级，因此，即使中间隔着 <div>、<section> 或 <article>，也仍然违反限制。参见 header 的内容模型和 footer 的内容模型。

下面两种写法都不符合规范：

<!-- 不符合规范：footer 内包含 header -->
<footer>
  <header>底部区域的标题</header>
  <p>版权信息</p>
</footer>

<!-- 不符合规范：header 内包含 footer -->
<header>
  <h1>网站名称</h1>
  <footer>一些附加说明</footer>
</header>

<header> 通常用于介绍性内容或导航辅助内容；<footer> 通常用于所属页面或章节的作者、版权、相关链接等信息。这些标签说明内容的用途，并不规定它们在屏幕上的位置。

浏览器实际会怎样显示？

上面的简单示例标签闭合完整，放在普通 <body> 中时，浏览器会按 HTML 解析规则保留嵌套关系，不会因为嵌套不符合规范就把内层元素移出去。参见 HTML 的解析规则。

常见浏览器的默认样式会将 <header> 和 <footer> 显示为块级元素，相当于：

header,
footer {
  display: block;
}

不加 CSS 时，内容通常按文档顺序排列。这两个标签本身不会添加边框或背景色，也不会自动吸顶或吸底。参见 HTML 默认渲染建议。

可以将下面的完整示例保存为 .html 文件并打开，观察显示效果。示例故意保留了不符合规范的嵌套：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>header 与 footer 嵌套演示</title>
  <style>
    body {
      font-family: sans-serif;
    }

    .outer {
      margin: 16px 0;
      padding: 16px;
      border: 2px solid #2878b5;
      background: #eaf4ff;
    }

    .inner {
      margin-top: 12px;
      padding: 12px;
      border: 2px solid #b76a00;
      background: #fff0d5;
    }
  </style>
</head>
<body>
  <!-- 不符合规范，仅用于演示 -->
  <footer class="outer">
    外层 footer
    <header class="inner">内层 header</header>
  </footer>

  <!-- 不符合规范，仅用于演示 -->
  <header class="outer">
    外层 header
    <footer class="inner">内层 footer</footer>
  </header>
</body>
</html>

页面会显示两个浅蓝色外框，每个外框里都有一个浅橙色内框。内层 header 仍在外层 footer 中，内层 footer 也仍在外层 header 中。颜色、边框和间距都来自 CSS，嵌套本身没有额外的视觉效果。

应该怎样改写？

根据内层内容的用途选择标签：

给区域添加标题，使用合适级别的 <h1> 至 <h6>。
为内容分组或应用样式，使用 <div>。
为同一篇文章设置介绍区和附注区，将 <header>、<footer> 写成兄弟元素。

例如，页脚中的“联系我们”是标题，可以这样写：

<footer>
  <h2>联系我们</h2>
  <p>工作时间：周一至周五</p>
  <p><small>© 示例网站</small></p>
</footer>

需要额外的容器来控制布局时，可以使用 <div>：

<header>
  <h1>示例网站</h1>
  <div class="header-extra">
    <p>网站的附加说明</p>
  </div>
</header>

页面和文章也可以分别有自己的 <header>、<footer>：

<body>
  <header>
    <h1>技术笔记</h1>
  </header>

  <main>
    <article>
      <header>
        <h2>理解 HTML 语义元素</h2>
        <p>文章简介</p>
      </header>

      <p>文章正文……</p>

      <footer>
        <p>作者：编辑部</p>
      </footer>
    </article>
  </main>

  <footer>
    <p><small>© 技术笔记</small></p>
  </footer>
</body>

文章的 <header>、<footer> 在 <article> 内，页面的 <header>、<footer> 在文章外，彼此没有违规嵌套。

修改时需要注意什么？

浏览器能显示许多不符合规范的结构，因此不能只凭页面外观判断 HTML 是否正确。可以用 HTML 校验工具检查嵌套是否合规。

将内层标签改为 <div> 时，还要检查现有的 CSS 和 JavaScript。例如，原来的 footer header 选择器将不再匹配，必要时应改用类选择器，保留对应样式。

需要把内容固定在页面顶部或底部时，应通过 CSS 设置定位。单独使用 <header> 或 <footer> 不会产生这种效果。