footer标签表示“所属区块的页脚”而非页面最底部，其语义由嵌套位置决定：作为body直接子元素为全站页脚，嵌套在article内为文章页脚，需正确闭合且避免误用为视觉容器。
footer标签不是“页面最底部”，而是“所属区块的页脚”
很多人写完 <footer></footer> 就默认它会出现在视口最下方，结果发现内容少时它悬在半空、加了 CSS 也不贴底——这不是 bug，是误解。footer 只表达语义：它是某个 sectioning content 元素（如 、<article></article>、<section></section>）的结尾信息区，和视觉位置无关。
常见错误包括：
- 把
<footer></footer>直接塞进<main></main>里，以为能撑满全宽，结果被main的默认 margin 和 display 行为截断宽度 - 在
<header></header>或<nav></nav>内部放<footer></footer>，逻辑上“开头里放结尾”，语义断裂 - 仅用
<div class="footer"> 替代，Lighthouse 会报“缺少语义化页脚”，读屏软件也识别不了 <h3>必须闭合，且闭合位置决定 DOM 结构是否正确</h3> <p><code><footer></footer>是双标签，不写会导致浏览器持续解析后续所有 HTML 都作为它的子内容，DOM 树直接错乱。你写的 JS 可能查不到元素，CSS 的margin-bottom失效，甚至整段正文被渲染成页脚的一部分。实操注意点：
- 检查 DevTools 的 Elements 面板，确认
footer节点有明确起止，且父级是预期的或<article></article> - 模板引擎（如 EJS、Django）中，如果
copyright变量值含未转义的，会提前闭合，导致结构塌陷 - 不要写成
<footer></footer>—— 这是自闭合写法，HTML 不支持，会被忽略
放在哪里，就代表“谁的页脚”
语义范围完全由嵌套位置决定，没有中间态：
- 作为
的直接子元素（且不在其他 sectioning 元素内）→ 全站页脚，应含版权、隐私政策、备案号等全局信息 - 嵌套在
<article></article>最末尾 → 该文章的页脚，适合放作者、发布时间、分类标签、分享按钮 - 放在某个
<section></section>内部末尾 → 该区块的收尾操作，比如“查看更多”链接或资源下载按钮 - 别放在
<main></main>内部：那会变成main的页脚，而非页面的页脚；搜索引擎和辅助技术会误判文档大纲
典型错误结构：
<div class="wrapper"></div> <footer></footer>——footer孤立在 wrapper 外，又没明确归属，语义断裂。内容要匹配语义，不是所有底部文字都配叫 footer
footer应承载与当前作用域直接相关的元信息，不是“底部容器”的代名词。硬塞无关内容，会误导读屏软件、降低 SEO 权重、触发 Lighthouse 告警。可放的内容：
- 版权信息，推荐用
<small></small>包裹（W3C 明确定义为“附属细则”语义） - 联系信息，必须用
<address></address>包裹，例如<address>contact@example.com</address> - 页脚导航，需用
<nav aria-label="页脚导航"></nav>，而非裸<ul></ul> - 本页相关链接：隐私政策、使用条款、网站地图（仅当它们属于当前页面上下文）
绝对不该放：
- 主导航（应独立用
<nav></nav>）、广告横幅、轮播图、客服弹窗按钮 - “回到顶部”按钮（语义是交互控件，建议用
<button></button>+ ARIA） - 重复的社交媒体图标（除非是本页作者专属）
真要视觉贴底，得靠 CSS 配合：比如
body { display: flex; flex-direction: column; min-height: 100vh; }+main { flex: 1; }+footer { margin-top: auto; }。语义正确性永远优先于视觉位置。 - 检查 DevTools 的 Elements 面板，确认
