footer标签的关键在于表达逻辑结尾而非物理底部位置，其语义归属由嵌套位置决定：作为body子级表示全局页脚，嵌套在article或section内则分别标识该内容区块的结尾信息。

标签的关键在于它表达的是**逻辑结尾**，不是页面的**物理底部位置**。

很多人一看到“footer”就默认它得出现在浏览器窗口最下方——其实这是对语义标签的典型误解。它的作用不是撑布局、不负责视觉定位，而是告诉机器：“这段内容，是紧挨着它的那个区块（比如 article、section 或整个 body）的收尾说明”。

---

footer 的逻辑归属由嵌套位置决定

• 放在 直接子级末尾 → 表示整页的全局页脚
• 嵌套在 <article></article> 最后 → 表示这篇文章的结尾信息（如作者、发布时间、参考文献）
• 出现在 <section></section> 内容末尾 → 表示该模块的补充说明（如数据来源、更新时间）

如果把它错放在 <header></header> 里，或塞进 <nav></nav> 中间，语义就完全断裂了——辅助技术会误读，SEO 结构化数据也会失效。

---

物理位置靠 CSS 实现，语义正确性不能妥协

你想让页脚贴底？那是 flexbox 或 grid 的事，不是 <footer></footer> 的责任。
你可以把 <footer></footer> 放在 开头，只要它包裹的内容确实是整页的元信息结尾，语义依然成立（尽管不推荐，因违背阅读流）。

但反过来，哪怕它视觉上在页面最底下，如果没正确闭合、或被错误包裹在 <div> 或 <code><section></section> 外层，浏览器可能把它归到错误的父节下，导致大纲解析出错。

---

常见逻辑错位陷阱

• 用 div class="footer" 替代 footer：机器无法识别语义，屏幕阅读器跳过，SEO 不抓取
• 在 footer 里放主导航或广告横幅：这些属于交互内容，不是“结尾元信息”，破坏语义边界
• 忘记闭合 ：后续所有 HTML 都会被吞进这个标签，JS 查不到、CSS 选不到、结构全乱
• 把联系信息写成普通 p 标签：必须用 <address></address> 包裹，否则不构成有效语义

---

正确的 footer 内容应具备“收尾属性”

它该回答：这部分内容是谁的？什么时候结束的？从哪来？去哪找更多？

CuspAI

CuspAI是一款AI工具，剑桥大学推出的材料学专业AI搜索工具。

下载

• 版权信息 → 用 <small></small> 或 <p></p>，年份和主体要清晰
• 联系方式 → 必须套 <address></address>，支持地理/邮箱/电话的自动识别
• 站点地图 → 用 <nav aria-label="站点导航"></nav> + <ul></ul> 列表组织
• 文章元数据 → 作者、更新时间、许可协议等，紧贴对应 <article></article> 结尾

不复杂但容易忽略。