header和footer是语义标签而非视觉占位符，分别定义内容的作用域开头与结尾；必须依附于body、article等语义容器，不可嵌套或滥用，否则破坏结构、SEO与无障碍访问。
header 和 footer 不是“页面顶部和底部”的视觉占位符，而是定义内容边界的关键语义标签。它们的作用不在于控制位置，而在于告诉浏览器、搜索引擎和屏幕阅读器：“这段内容属于谁的开头或结尾”。用对了，结构清晰、SEO 友好、读屏顺畅；用错了，哪怕样式再漂亮，机器也难理解。
header 服务于明确的内容作用域
一个 header 必须依附于某个有边界的语义容器——比如 <body>、<article>、<section> 或 <aside>。它不能孤立存在，也不能嵌套在另一个 header 或 footer 里。
-
<body><header><h1>站点名</h1><nav>...</nav></header>：这是全站级页眉，承载 logo、主导航等全局引导信息 -
<article><header><h2>文章标题</h2><p>作者：李四</p></header>...</article>：这是文章自己的页眉，只服务该内容单元 - 别把纯装饰性 banner、背景图或单行说明文字硬塞进
<header>——没语义支撑，就只是个空壳
footer 表达“归属与收尾”，不是视觉底部
footer 的核心语义是“补充性结尾信息”，不是“必须贴在页面最下面”。它可以出现在 <body> 底部，也可以放在 <article> 或 <section> 内部，只要它确实在为那个区块做收尾说明。
-
<body><footer><p>© 2026 公司版权</p></footer>：全局页脚，通常位于页面末尾 -
<article><footer><small>编辑于 2026-06-08 | 标签：HTML, 语义化</small></footer></article>：为这篇文章提供元信息，和全局页脚互不干扰 - 避免在
<header>里塞<footer>，也别用<footer>包导航栏或广告位——它不是“杂项收纳盒”
嵌套不是自由组合，而是作用域分层
多个 header 和 footer 可以共存，但必须各守其位。它们之间没有父子继承关系，只有并列的服务关系。
立即学习“前端免费学习笔记（深入）”；
-
<body>下的<header>管整站，<article>下的<header>只管这篇文章，二者语义独立 -
<main>内可以包含<header>和<footer>，因为它们属于主内容区块的附属元信息，不是主内容本身 - 禁止
<header><footer>...</footer></header>或<footer><header>...</header></footer>——逻辑冲突，语义失效
别为了“HTML5化”而滥用
加了 <header> 和 <footer> 不等于语义正确。关键看内容是否真实构成某个区块的“引导”或“收尾”。
- 一段没有标题、没有导航、也没有上下文的纯文字，套
<header>就是语义污染 - 页脚区域若只是视觉分隔线或浮动按钮，更适合用
<div role="contentinfo">或普通 div + CSS 定位 - 旧浏览器兼容需注意：
header, footer { display: block; }是轻量稳妥的兜底写法
