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