标签语义上表示父容器的页脚内容，不限于页面底部；可嵌套在等元素内，多个合法且互不影响；其语义与视觉位置无关，应通过CSS布局而非HTML顺序控制显示位置。
<footer></footer> 标签不必须放在页面最底部，它只表示其**父容器的页脚内容**，语义上是“某一部分的结尾信息”，不是“整个页面的底部”。
为什么很多人误以为 <footer></footer> 必须在页面最底？
因为常见 CMS 或模板里，<footer></footer> 常被用在 级别且固定定位，久而久之形成错觉。但 HTML5 规范明确说明：<footer></footer> 可以嵌套在 <article></article>、<section></section> 甚至 <aside></aside> 内部，作用范围仅限于该元素的上下文。
- 一个
<article></article>可以有自己的<footer></footer>，放作者、发布时间、标签等 - 一个
<section></section>也可以有<footer></footer>，比如“本节参考资料” - 多个
<footer></footer>在同一页面完全合法，浏览器不会报错，屏幕阅读器也会分别朗读其上下文
<footer></footer> 和视觉位置完全解耦
它的语义和 CSS 布局无关。即使你把 <footer></footer> 放在 HTML 源码顶部、用 position: absolute 覆盖在标题上，它仍是语义正确的页脚——只是体验极差。真正影响可访问性和 SEO 的是结构层级，不是视觉坐标。
- 搜索引擎和辅助技术依赖 DOM 层级判断内容归属，不是靠
top: 100vh - 想让某个
<footer></footer>出现在视口底部？用 Flexbox 或 Grid 实现，不要靠挪动 HTML 顺序“凑位置” - 如果硬要“全站底部”，推荐包裹在
直接子级的<footer></footer>，并确保它不被display: none或aria-hidden="true"隐藏
容易踩的坑：混淆 <footer></footer> 和 <small></small> / <address></address>
<footer></footer> 不是格式化标签，不能替代语义更精确的元素：
立即学习“前端免费学习笔记（深入）”；
- 版权信息写在
<footer></footer>里没问题，但如果只有一行“© 2024”，用<small></small>更轻量；若含联系邮箱/地址，优先用<address></address> -
<footer></footer>里可以包含<address></address>，但反过来不行——<address></address>只能用于联系信息，不能塞导航链接或社交图标 - 避免嵌套式滥用：
<footer><footer></footer></footer>合法但无意义，除非内层属于某个<article></article>
<article>
<h2>一篇技术笔记</h2>
<p>关于如何正确使用 footer…</p>
<footer>
<p>作者：<strong>张工</strong>｜更新时间：<time datetime="2024-06-15">2024-06-15</time></p>
</footer>
</article>
<footer>
<address>
联系我们：<a href="https://www.php.cn/link/c7f66351c012165813d0b478effab44d">team@example.com</a>
</address>
<p><small>© 2024 示例站点. 保留所有权利.</small></p>
</footer>
最常被忽略的一点：当 <footer></footer> 作为 子元素存在时，它就代表“整个页面的页脚”；一旦被包进 <main></main> 或 <div role="region">，它的语义范围就收缩了——这个边界感，比怎么让它“贴底”重要得多。</div>
