必须嵌套在语义化区块（如、）内，不可悬空于外；应作为内容结束标记，配合position: sticky与父容器min-height: 100vh实现可靠贴底，并添加role="contentinfo"提升可访问性。
footer 标签不是必须包在
很多人写完页脚发现不生效，第一反应是“没闭合”或“CSS 没写对”，其实常卡在语义结构上：<footer></footer> 是语义化标签，不是布局容器。它必须出现在有意义的“内容区块”内部——比如 、<article></article>、<section></section>，但不能孤零零挂在 或 下。
常见错误现象：<footer></footer> 写在 外，浏览器会自动修复 DOM（把 <footer></footer> 塞进 ），但 JS 查询 document.querySelector('footer') 可能取不到预期位置，CSS 的 position: sticky 也容易失效。
-
<footer></footer>应作为页面主内容的结束标记，通常放在<main></main>或<section></section>之后、之前 - 如果页脚要跨多个栏目（如博客每篇文章带独立页脚），可用
<article><footer>…</footer></article> - 别用
<footer></footer>替代<div class="footer"> 来做纯视觉定位——它不自带 margin/padding，也不触发 BFC <h3>position: fixed 和 position: sticky 在 footer 上效果完全不同</h3> <p>想让页脚“贴底”，直接写 <code>position: fixed; bottom: 0;看似简单，但实际会遮住内容、破坏可访问性（屏幕阅读器可能跳过）、打印时消失。真正可靠的“文档流底部”方案是position: sticky，但它有严格前提。-
position: sticky要求父容器有明确高度（比如min-height: 100vh），且<footer></footer>必须是该容器的最后一个子元素 - 典型安全写法：
<main>…</main><footer>…</footer>，再给<footer></footer>加margin-top: auto -
position: fixed只适合全站悬浮工具栏类页脚（如客服入口），不是传统“页面底部”语义
aria-label 和 role="contentinfo" 不是可选项
只写
<footer></footer>，屏幕阅读器默认读作“footer”，但不会说明这是“网站版权信息”还是“文章评论区”。WCAG 要求明确传达作用域和目的。立即学习“前端免费学习笔记（深入）”；
- 全局页脚加
role="contentinfo"（这是 ARIA 规范强制推荐，比单纯<footer></footer>更可靠） - 如果页脚含多类信息（如左侧版权 + 右侧联系方式），用
aria-label="网站版权与联系信息"比空着强 - 避免
role="footer"—— 这是冗余的，<footer></footer>已隐含该 role
不要用
<footer></footer>包导航链接当“页脚导航”页脚里放一堆
<a></a>链接很常见，但直接塞进<footer></footer>会导致语义混乱：这些链接属于“网站导航”，不是“本页/本节的元信息”。搜索引擎和辅助技术会误判结构优先级。- 正确做法：用
<nav aria-label="页脚导航"><ul>…</ul></nav>包住链接，再放进<footer></footer> - 如果链接是当前文章的“相关文章”，应放在
<aside></aside>或<section></section>里，而不是<footer></footer> - 版权文字（如 © 2024 XXX）才是
<footer></footer>的核心内容，其他都算附属
最易被忽略的一点：页脚的语义边界由它所归属的“范围”决定。同一个
<footer></footer>标签，在<article></article>里代表文章结尾，在里代表整个页面结尾——浏览器和读屏软件靠这个判断上下文，不是靠 CSS 类名或位置。 -
