header 和 footer 标签不能互相嵌套，因它们是平级语义单元而非容器关系，HTML5 规范明确禁止，否则导致语义丢失、辅助技术误判及 SEO 降权。
header 和 footer 标签不能互相嵌套，这是 HTML5 的结构硬约束，不是样式或浏览器兼容问题——验证器会警告，读屏软件可能跳过内部内容，搜索引擎也可能降权语义权重。
为什么 header 里不能放 footer
它们是平级语义单元，不是“容器-子容器”关系。HTML 规范明确禁止 header 直接包含 footer（反之亦然），因为这会破坏“区块起始/结尾”的语义对称性。
-
<header><footer>...</footer></header>是无效结构，浏览器会视作普通 div 处理，语义丢失 - 辅助技术（如屏幕阅读器）依赖大纲层级判断内容主次，嵌套会让它误判“页脚是页眉的一部分”
- SEO 工具可能忽略该
footer的版权或联系信息，因为它脱离了应有的作用域
正确嵌套的唯一路径：都作为节元素的直接子元素
header 和 footer 必须各自依附于明确的节容器（body、article、section 等），且只能是其直接子元素。
- 全局页眉：
<body><header>...</header>...<footer>...</footer></body> - 文章头部：
<article><header><h1>标题</h1><p>作者</p></header>...<footer>标签 | 更新时间</footer></article> - 错误写法：
<div class="wrapper"><header>...</header></div>—— 外层div切断语义链，header被降级
一个作用域内只能有一个 header 和一个 footer
重复使用会混淆内容层级。比如在同一个 article 里写两个 header，读屏软件可能无法判断哪个是主标题区。
立即学习“前端免费学习笔记（深入）”；
- 允许多组存在：页面可以有
body > header+article > header+section > header，只要父容器不同 - 禁止连续同级：
<article><header>A</header><header>B</header></article>是结构混乱 - 轻量信息不用
footer：比如“本文共 1200 字”这种次要说明，用<small>或普通<p>更合适
最容易被忽略的是：语义绑定比视觉位置重要得多。哪怕你用 CSS 把 footer 固定在页面顶部，只要它属于某个 article 的结尾信息，结构上就仍是合法的；反过来，如果一段底部版权信息没包在 body > footer 里，而是塞进某个 div 中，再怎么调样式，它也成不了真正的页脚。
