header和footer应按节段祖先就近绑定，页面级需直接嵌套在body下；main必须唯一且不嵌套于header/footer/aside中；footer内全局导航链接须用nav包裹。
header 和 footer 不是“放页面最顶/最底的盒子”，用错嵌套层级会稀释语义权重，反而拖累 SEO。
为什么一个页面能有多个 <header> 和 <footer>？
因为它们绑定的是「最近的节段祖先」——即离它最近的 <article>、<section> 或 <body>。搜索引擎靠这个判断内容归属关系。
- 页面级
<header>应直接在<body>下，包含网站 logo、主导航、H1 标题 - 每篇
<article>内可独立配一个<header>（含文章标题、作者、日期）和一个<footer>（含标签、评论入口） - 错误做法：把所有文章 footer 都塞进页面级
<footer>里 —— 搜索引擎会误判这些元信息属于整站而非单篇文章
<main> 必须且只能出现一次，且不能嵌套在 <header>、<footer>、<aside> 中
这是 W3C 强制规范，也是 Google 渲染时识别「核心内容」的关键信号。一旦违反，<main> 内容可能被降权或忽略。
- 正确结构：
<body> <header>...</header> <main>...</main> <footer>...</footer> </body> - 常见错误：
<header> <main>...</main> </header>—— 此时<main>被视为 header 的一部分，失去主体语义 - 注意：
<main>内部可以有<section>和<article>，但不能再出现<header>或<footer>的「页面级实例」
嵌套时 <footer> 里的链接要不要加 <nav>？
要看链接性质。页脚中全局导航类链接（如「关于我们」「隐私政策」）必须用 <nav> 包裹；纯元信息（如备案号、© 2026）则不需要。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<footer><nav aria-label="页脚导航"><ul><li><a href="/about">关于我们</a></li></ul></nav><p>© 2026 公司名称</p></footer> - 不加
<nav>的 footer 链接，屏幕阅读器会当作普通文本读出，SEO 权重也弱于导航上下文中的链接 - 避免把所有链接都塞进一个
<nav>—— 多个小型<nav>（如「法律条款」「社交链接」）比一个大杂烩更利于语义解析
最容易被忽略的是 <footer> 的「就近绑定」原则：它永远属于离它最近的那个节段元素，而不是视觉位置。写完记得检查 DOM 层级，别让一个 <footer> 意外挂在了 <section> 外面却想表达文章尾注的意思。
