header和footer是依附于body、article等节元素的语义容器，不可互相嵌套或脱离上下文独立使用；全局页眉/页脚应为body直系子元素，文章级头尾须置于对应article内，滥用会损害可访问性与seo。
header 和 footer 不是“顶部盒子”和“底部盒子”，而是有明确语义边界的结构容器——用对位置，比用对标签更重要。
header：谁的开头，就属于谁
它必须依附于一个有明确范围的内容单元，比如 、<article></article> 或 <section></section>。不能独立存在，也不能嵌套在另一个 header 里。
- 全局页眉（如 logo + 主导航）应作为
的直接子元素 - 一篇博客文章的标题、作者、发布时间，应包在
<article></article>内部的<header></header>中 - 仅为了居中一段文字而套
<header></header>，属于语义滥用，会干扰屏幕阅读器判断主次 - 一个区块内只应有一个
<header></header>；连续两个<header></header>容易让辅助技术误判层级
footer：不是视觉底部，而是逻辑结尾
<footer></footer> 表示其最近的祖先节（sectioning content）或整个文档的补充信息区。它不强制出现在页面最下方，CSS 可以把它定位在侧边或折叠面板里，语义不变。
- 网站版权、备案号、隐私政策链接，应放在
直接子级的<footer></footer> - 某篇文章末尾的“参考资料”“编辑时间”“相关推荐”，应归入该
<article></article>自带的<footer></footer> -
<footer></footer>不创建新节，也不允许嵌套在<header></header>或<nav></nav>内 - 纯导航栏（只有菜单项）更适合用
<nav></nav>，而非硬塞进<header></header>
嵌套与组合：别让语义打架
<header></header> 和 <footer></footer> 是平级语义单元，彼此不能嵌套。它们也绝不能替代 ，更不能包裹整个页面结构。
- 合法结构示例：
<header>...</header><main>...</main><footer>...</footer> - 禁止写法：
<header>...</header>（是根元素，不可被任何标签包裹） -
<nav></nav>可独立存在，也可自然放在<header></header>内——因为导航常属页眉的一部分 - 轮播图、卡片列表、分页控件这类 UI 载体，内容不可独立分发，用
<div> 更准确 <h3>兼容与落地：光换标签不够，还得懂约束</h3> <p>现代项目虽基本不需兼容 IE8，但若涉及内网老旧系统或遗留框架，仍需注意基础兼容性。</p> <ul> <li>旧浏览器将 <code><header></header><footer></footer>当作未知 inline 元素，布局易错乱 - 显式声明
header, footer { display: block; }是轻量稳妥的做法 - 避免用
<header></header>替代<div class="header"> —— 改标签名不改逻辑，等于没 HTML5 化 <li>判断是否该用：看这段内容是否构成一个可被 RSS 抓取、邮件转发或单独复用的独立单元</li> </div>
