<header>和<footer>是语义化结构容器，非视觉占位符；仅当内容承担介绍性或导航性入口角色时才使用，须与父容器语义对齐，避免滥用或悬空，否则损害可访问性、SEO及DOM稳定性。
<header> 和 <footer> 不是“页面顶部/底部”的视觉占位符，而是有明确语义边界的结构容器；用错位置或滥用嵌套，会导致屏幕阅读器跳转错乱、SEO 权重分散，甚至被浏览器自动修正 DOM。
什么时候该用 <header> 而不是 <div class="header">
只有当内容确实承担「介绍性或导航性入口角色」时，才该用 <header>。比如网站 logo + 主导航、某篇 <article> 的标题 + 作者 + 发布时间。
- ✅ 正确场景：
<header><h1>博客标题</h1><nav>...</nav></header>（页面级）；<article><header><h2>评论精选</h2></header>...</article>（区块级） - ❌ 错误场景：仅为了加 margin/padding 包一层、里面只有纯图标或空
<div>、在<main>外部又套一个无内容的<header> - ⚠️ 注意：
<header>内不强制要求有标题元素，但若无<h1>–<h6>或其他可识别的引导内容，其语义价值会大幅削弱
<header> 和 <footer> 能否嵌套？嵌套时怎么判断层级是否合理
可以多层嵌套，但每层都必须与其直接父容器语义对齐——子 <header> 描述的是父容器的内容起点，不是整个页面的起点。
- ✅ 合理嵌套：
<section><header><h3>用户反馈</h3></header><p>…</p></section>（该<header>是对<section>的说明） - ❌ 混淆层级：
<article><header><h1>全站公告</h1></header>…</article>（<h1>表述的是全局信息，不该出现在 article 内部 header 中） - ? 判断口诀：删掉这个
<header>，它包裹的内容是否还能准确表达所属父容器的主题？不能，就说明它语义错位
为什么 <footer> 放版权信息却常被 W3C 验证警告
因为 <footer> 不等于“页面最底下”，它必须附着于某个语义主体之后；单独放在 <body> 底部但未与 <main> 或 <article> 构成逻辑归属关系，验证器会视为“悬空 footer”。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
<body><header>...</header><main>...</main><footer>© 2026 版权所有</footer></body>（与<main>并列，语义上归属整页） - ✅ 区块级用法：
<article><header>...</header><p>正文</p><footer><p>标签：HTML, 语义化</p></footer></article> - ⚠️ 常见陷阱：把多个
<footer>并列堆在<body>底部，如<footer>版权</footer><footer>友情链接</footer>—— 缺少上下文归属，应合并或改用<aside>/<section>
最容易被忽略的一点是：语义标签的效力不取决于你写了几个，而取决于它们是否真实反映内容之间的逻辑关系。一个 <header> 如果包裹的是广告 Banner，一个 <footer> 里塞满无关外链，再标准的写法也失去语义意义。
