header和footer必须依附于节元素（如body、article、section），不可嵌套或置于div等非节元素内，且每节最多各一个，须含语义内容（如标题、导航）才有效。
header 和 footer 不能互相嵌套，也不能随意塞进任意父容器；它们必须依附于明确的“节元素”（sectioning content），否则语义失效、验证失败、屏幕阅读器会跳过或误读。
header 和 footer 必须有合法父容器
它们不是独立存在的标签，浏览器和辅助技术会根据最近的节元素（body、article、section、aside）来判断其作用域。没有合法父容器时，结构即不合规。
-
header可以是body的直接子元素（全局页眉），也可以是article或section的子元素（局部章节头） -
footer同理：可出现在body底部（全站版权），也可在单个article内部（如“本文编辑于…”） - 禁止把
header或footer直接放在div、p、span等非节元素内部——这些父容器无法承载语义作用域 -
main允许包含header和footer，但注意：它们服务的是main这个节，而非整个页面
header 里不能放 footer，footer 里也不能放 header
这是 HTML5 明确禁止的嵌套关系：header 和 footer 是平级语义单元，彼此既非父子也非内容容器关系。一旦嵌套，W3C 验证器报错，部分屏幕阅读器会忽略内层标签或错误归类。
- 错误写法：
<header><footer>© 2026</footer></header> - 即使视觉上想让 logo 和版权并排，也应改用
div+ CSS 布局，而非滥用语义标签强行嵌套 - 若需组合多个元信息（如 logo + 搜索框 + 用户登录入口），全部放在同一个
header内即可，无需再包一层footer或其他语义容器
一个节元素内最多一个 header 和一个 footer
重复出现会破坏主次逻辑。辅助技术依赖唯一性来定位内容起点与终点，多 header 会让它无法判断哪个才是真正的标题区块。
- 允许：
<section><header><h2>用户反馈</h2></header><p>…</p> <footer><p>最后更新：2026-04-28</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></footer></section> - 禁止：
<section><header><h2>标题</h2></header><header><p>副标题</p></header></section>—— 第二个header无意义且干扰解析 - 特别注意：
body > header和article > header是并列关系，不是嵌套继承；后者不“属于”前者，只是同页面共存
常见踩坑点：把 header 当 div 用
仅为了居中一段文字、加背景色、或撑开高度而套 header，是最隐蔽也最普遍的语义污染。这类用法不会报错，但会误导 SEO 和无障碍工具。
- 错误动机示例：用
<header><p>欢迎光临</p></header>替代<div class="banner"><p>欢迎光临</p></div> - 正确做法：header 内至少应含一个
h1–h6、nav、logo 图片（带alt）、或明确标识该节身份的内容 - footer 同理：空
<footer></footer>或只塞<p>.</p>会被视为无效语义，不如不用
真正难的不是写对标签，而是每次敲下 <header></header> 时，得先问一句：它到底在为谁服务？这个“谁”，必须是某个能被浏览器识别为独立语义单元的父元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
