和是语义容器，必须依附于、等节元素，不可脱离上下文或互相嵌套；滥用会破坏可访问性与SEO。
header和footer不是“页面顶部/底部”的视觉占位符
它们是语义容器，必须依附于明确的内容作用域——要么是 ，要么是 <article></article>、<section></section> 或 <aside></aside>。脱离上下文单独使用，等于用错标签。
常见错误现象：<header><div class="logo">...</div></header> 套在无意义的 <div> 里；或把 <code><footer></footer> 放进 <header></header> 里试图“做页眉里的版权栏”——这违反 HTML5 结构规范，验证器会报错，屏幕阅读器可能跳过或误读。
- 全局 header 应为
的直接子元素，包含 logo、主导航、搜索框 - 某篇
<article></article>的标题+作者+发布时间，应包在该<article></article>内部的<header></header>中，而非塞进全局 header - 一个区块内最多一个
<header></header>和一个<footer></footer>；连续写两个<header></header>会让辅助技术混淆主次
嵌套规则：可多层共存，但禁止互相嵌套
<header></header> 和 <footer></footer> 是平级语义单元，彼此不能作为直接子元素。也就是说：<header><footer>...</footer></header> 是无效结构，浏览器不会报错但会降级处理（视作普通容器），语义丢失。
但它们可以各自独立嵌套在不同层级的节元素中：
立即学习“前端免费学习笔记（深入）”；
-
下可有<header></header>（全站导航）和<footer></footer>（全站版权） -
<section></section>内可有自己的<header></header>（章节标题+副标题）和<footer></footer>（章节参考资料） -
<article></article>内的<footer></footer>（如“标签 | 编辑于 2026-05-07”）与外层的<footer></footer>互不干扰
关键判断点：每个 <header></header> 或 <footer></footer> 必须服务于它最近的父级节元素（、<article></article> 等），而不是为了视觉排版硬加。
复用 header/footer 的真实限制与替代方案
想让多个页面共用同一套 header 和 footer？别直接用 jQuery.load() 加载外部 header.html——本地双击打开 index.html 时会因 file:// 协议触发跨域错误，控制台报 Access to XMLHttpRequest at 'header.html' from origin 'null' has been blocked。
更实际的选项：
- 起本地服务：用
python3 -m http.server或 VS Code Live Server 启动，load()才能正常工作 - 构建时注入：用 Webpack +
html-webpack-plugin，或 Eleventy/Hugo 这类静态站点生成器，在打包阶段把外部文件内容 inline 进 HTML - 服务端 includes：Nginx 的
include指令、Apache 的 SSI（<!--#include virtual="header.html" -->） - 避免用
<iframe></iframe>：高度自适应麻烦、焦点管理复杂、无障碍支持弱，仅适合纯静态版权条
注意：<header></header> 和 <footer></footer> 本身不带样式，不写 CSS 时视觉上和 <div> 几乎没区别；它们也不影响 SEO 或可访问性——除非你用错了结构。
<h3>什么时候其实根本不需要 header 或 footer</h3>
<p>不是所有带标题或结尾信息的区域都该套一层 <code><header></header> 或 <footer></footer>。核心判断标准是：这块内容是否构成一个有边界的、可被 RSS 抓取或邮件转发的独立单元。
例如：
- 一个卡片式
<div class="card"> 里只有一段标题文字？用 <code><h3></h3>就够了，不必包<header></header> - 文章末尾一行“本文作者：张三”，若没有其他元信息（发布时间、标签、编辑说明等），用
<small></small>或<p class="byline"></p>更准确 - 侧边栏里的“推荐链接”，属于
<aside></aside>的补充内容，不应硬塞进<footer></footer>
滥用会稀释语义：全站每个卡片都加 <header></header>，搜索引擎和屏幕阅读器反而难以识别真正重要的头部结构。
