header、main 和 footer 是语义化结构标记，非视觉容器：header 必须作为语义容器（如 body、article）的直接子元素；main 唯一且必须是 body 的直接子元素；footer 表达收尾信息，需绑定作用域。
header、main 和 footer 不是视觉容器，而是有明确语义角色的结构标记。用对了，屏幕阅读器能准确定位，搜索引擎能理清内容主次；用错了，哪怕样式看起来没问题，也会让可访问性和 SEO 大打折扣。
header 必须依附于明确的作用域
每个 header 都得回答一个问题：“它属于谁？”它可以出现在 body 顶层，表示全站页眉；也可以出现在 article 或 section 内部，表示该区块自己的标题区。关键在于它必须是某个语义容器（如 body、article、section）的直接子元素。
- ✅ 合法：
<header><h1>首页</h1></header><main></main> - ✅ 合法：
<article><header><h2>一篇博客</h2> <p>作者：王五</p></header><p>正文…</p></article> - ❌ 错误：
<div class="wrapper"><header></header></div>（div 没有语义，header 降级为普通 div） - ❌ 错误：
<footer><header></header></footer>（footer 内不能嵌套 header，逻辑冲突）
main 是页面唯一的“核心内容锚点”
main 标签代表整个页面最不可替代的内容主体，W3C 规定它只能出现一次，且必须是 body 的直接子元素。它不是“内容区 class”，而是一个 landmark（地标），供辅助技术快速跳转。
- ✅ 正确：
<header></header><nav></nav><main><h1>文章标题</h1> <p>正文…</p></main><footer></footer> - ❌ 错误：
<div><main></main></div>（被 div 包裹，失去 landmark 身份） - ❌ 错误：
<article><main></main></article>（main 不能嵌在 article 里，语义越界） - 动态渲染时，新内容应插入已有 main 内部，而非销毁重建——否则会触发多 landmark 报错
footer 表达的是“结尾信息”，不是“底部位置”
footer 的语义核心是“补充性、收尾性内容”，不是 CSS 中的 bottom 定位。它可以出现在整页末尾，也可以出现在 article 底部，只要它承载的是该区块的结束信息。
- ✅ 全局 footer：
…<footer><p>© 2026 版权所有</p></footer>（作为 body 最后一个直系子元素） - ✅ 区块级 footer：
<article>…<footer><ul> <li>标签：HTML</li> <li>编辑：李四</li> </ul></footer></article> - ❌ 错误：
<footer><nav><ul><li>首页</li></ul></nav></footer>（主导航不属于结尾信息） - ❌ 错误：
<footer><div class="ad-banner"></div></footer>（广告与页脚语义无关）
三者协同的关键逻辑
它们不是孤立存在的标签，而是一套相互呼应的结构契约：
- header 和 footer 可多次出现，但每次都要绑定到具体作用域（body / article / section）
- main 只能有一个，且永远与 header、footer 并列于 body 下，不被任何语义容器包裹
- 不要因为视觉上“页眉在上、页脚在下”就强行把 header 放在 nav 上面、footer 放在 aside 下面——结构顺序应由内容逻辑决定，样式由 CSS 控制
- 若某区域只需一个标题，用 h2 就够了；只有当需要组合标题 + 副文本 + 导航等引导性内容时，才用 header 包裹
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
