和是语义化结构元素，禁止互相嵌套，必须各自作为body、article或section等节元素的直接子元素，每作用域限各一个，且须承载引导性或结尾性内容。
<header></header> 和 <footer></footer> 不是“可选的装饰标签”，而是有明确语义约束和使用边界的结构元素。用错位置、嵌套失当或混用 ，会直接破坏文档大纲、影响屏幕阅读器跳转逻辑，甚至被搜索引擎降权。
什么时候该用 <header></header>，而不是 <div class="header">
<p>只有当该区域承载「页面或章节的引导性内容」时才用 <code><header></header> —— 比如站点 logo + 主导航 + 搜索框，或一篇博客文章顶部的标题、作者、发布时间。<header></header> 可以出现多次（每个 <article></article> 或 <section></section> 都能有自己的 <header></header>），但不能包裹整个页面布局容器。
- ✅ 正确：页面顶部的全局导航区、单篇文章开头的
<h1></h1> 与元信息
- ❌ 错误：用它替代 CSS 布局容器（如“头部 banner 图”）、放在
<main></main> 外部又不对应任何节（section）
- ⚠️ 注意：
<header></header> 里不要放 <main></main> 或另一个 <header></header>；它也不该包含页脚类信息（版权、联系方式等）
<footer></footer> 的作用范围经常被高估
<h1></h1> 与元信息<main></main> 外部又不对应任何节（section）<header></header> 里不要放 <main></main> 或另一个 <header></header>；它也不该包含页脚类信息（版权、联系方式等）<footer></footer> 的作用范围经常被高估<footer></footer> 不等于“页面最底下那条横栏”。它的语义是「所属节（sectioning content）的结尾信息」——可以属于整个 ，也可以只属于某个 <article></article> 或 <section></section>。
- ✅ 正确：页面底部的版权信息（
<footer></footer>）；某篇博客文末的“标签列表、相关文章链接”（<article><footer></footer></article>） - ❌ 错误：把网站底部导航、友情链接塞进
<footer></footer>却不加role="navigation"或额外<nav></nav>包裹——这会让屏幕阅读器误判为“纯元数据”，跳过可操作内容 - ⚠️ 注意：一个
<section></section>内同时出现<header></header>和<footer></footer>是完全合法的，且推荐这么做，以形成完整语义节
常见错误：把 <header></header> 当成
是元数据容器（<title></title>、<meta>、<link>），完全不可见；<header></header> 是 内的可见内容块。两者层级、用途、校验规则全不同。
- ❌ 把
<meta>或<script></script>放进<header></header>→ 浏览器忽略或报错 - ❌ 在
<header></header>里写<title></title>→ 页面标题不会更新，SEO 失效 - ✅ 正确做法：所有可见头部内容走
<header></header>；所有配置类信息严格留在
最容易被忽略的一点是：语义标签本身不提供样式，但浏览器默认会给 <header></header> 和 <footer></footer> 加 margin 或 display 行为（尤其在旧版 Safari 中）。如果你依赖 CSS 重置或自定义布局，务必检查它们是否意外触发了隐式 display: block 或垂直间距——这不是 bug，是规范预期行为。
