header和footer是语义标签，非视觉占位符，须明确归属语义容器：header服务区块开头，footer表达结尾信息，二者不可嵌套，且不能滥用为装饰元素。
header 和 footer 不是“页面顶部和底部”的视觉占位符，而是表达内容作用域边界的语义标签。它们的核心价值在于告诉浏览器、搜索引擎和屏幕阅读器：“这部分内容属于谁的开头或结尾”。用对了，结构清晰、可访问性强、SEO 友好；用错了，哪怕样式再精致，机器也难以理解真实意图。
header 必须明确归属某个语义容器
每个 header 都要回答一个问题：它服务的是哪个区块？它可以出现在
下（全站页眉），也可以出现在- ✅ 正确：
<body><header><h1>网站名</h1></header><main></main></body> - ✅ 正确：
<article><header><h2>文章标题</h2><p>作者：王五</p></header><p>正文…</p></article> - ❌ 错误：
<div class="wrap"><header></header></div>—— div 没有语义，header 降级为普通容器 - ❌ 错误：连续写两个 header 而无对应节元素 —— 会干扰大纲结构，读屏软件可能跳过或误读
footer 表达的是“收尾信息”，不是“贴底装饰”
footer 的语义本质是“补充性、归属性结尾内容”，比如版权、编辑时间、数据来源、相关链接等。它的位置由 CSS 控制，逻辑上只需紧贴其所服务的区块末尾即可。
- ✅ 全局页脚：
<body>…<footer><small>© 2026 版权所有</small></footer></body>（作为 body 最后一个直系子元素） - ✅ 文章页脚：
<article>…<footer><p>标签：HTML｜更新于 <time datetime="2026-06-20">2026-06-20</time></p></footer></article> - ❌ 错误：
<footer><nav><ul><li>首页</li></ul></nav></footer>—— 主导航不属于“结尾信息” - ❌ 错误：
<footer><div class="ad-banner"></div></footer>—— 广告与页脚语义无关，应使用普通 div 或role="complementary"
header 与 footer 不可互相嵌套
它们是平级语义单元，不存在从属关系。嵌套不仅违反 HTML5 规范，还会导致辅助技术识别异常、验证器报错，甚至让 SEO 权重被稀释。
- ❌ 禁止：
<header><footer></footer></header>或<footer><header></header></footer> - ✅ 合法共存：
<body><header></header><main><article><header></header><p>…</p><footer></footer></article></main><footer></footer></body> - ⚠️ 注意：
<main>必须是<body>的唯一且直接子元素，不能被 header 或 footer 包裹
别为“看起来像”而滥用，要为“它服务谁”而选择
一段带背景色的横幅，如果只是视觉装饰、没有引导性内容（如标题、导航、slogan），就不该用 header；一条分隔线若不含任何元信息，也不该硬套 footer。
- 纯装饰 banner → 推荐
<div role="banner">或普通 div + CSS - 文章末尾的“返回顶部”按钮 → 可放在 article 的 footer 内，因其服务于该内容单元的收尾体验
- 页脚里的友情链接 → 若属于全站归属信息，可用；若只是推广跳转，建议移出 footer，改用
<aside>或普通链接区 - header 内不强制含 h1，但若有标题，应与所属区块主题一致（例如 article > header 中的 h2 应反映该文主题）
