footer标签语义明确，仅容当前页面或文章直接相关的元信息、导航、联系入口等；禁放全站广告、无关外链、重复主导航及“回到顶部”按钮；须按作用域（body/article/section）嵌套，确保DOM与视觉顺序一致。
footer 标签不是“随便塞版权信息的地方”，它有明确的语义边界：只应包含与当前页面或当前文章直接相关的元信息、导航、联系入口等，不能放全站通用的广告、无关外链或重复的主导航。
哪些内容适合放进 footer 标签
浏览器和屏幕阅读器会把 footer 当作当前范围（页面级或文章级）的结尾元区域，因此内容必须具备“收尾属性”：
- 当前页面的版权信息，如
© 2024 MySite. All rights reserved. - 当前页面的更新时间，如
- 指向本页相关文档的链接：隐私政策、使用条款、网站地图（仅当它们是本页上下文的一部分）
- 当前文章底部的作者信息、分类标签、相关文章推荐（如果
footer出现在article内部） - 联系方式（邮箱、地址）——但仅限该页面所代表实体的联系信息，比如“关于我们”页的 footer 可以放公司地址，“博客文章”页的 footer 不应放公司地址除非明确归属
哪些内容绝对不该放
违反语义会导致 SEO 降权、辅助技术误读、甚至被 Lighthouse 标记为“结构错误”：
- 全站主导航（应该放在
nav或header中） - 无关第三方广告、推广横幅
- 重复的社交媒体图标（除非是本页作者/发布者的专属社交链接）
- “回到顶部”按钮（语义上属于交互控件，建议用
button+ ARIA，不要塞进footer充数） - 多个
footer嵌套（HTML5 不禁止，但无意义；一个页面通常只需一个页面级footer，article或section内可另有一个局部footer）
footer 的嵌套与作用域怎么判断
HTML5 规定：footer 总是关联到其最近的祖先节（section、article、body）。它的内容语义由父容器决定：
立即学习“前端免费学习笔记（深入）”；
如何配置 Webpack
…正文…
上面例子中，第一个 footer 属于 article，描述的是这篇文章的元数据；第二个 footer 是 body 的子元素，代表整页的页脚。两者层级不同、语义不混用。
CSS 布局与可访问性提醒
视觉上 footer 常被固定在页面最下方，但别用 position: fixed 强行压底——这会破坏文档流，导致屏幕阅读器跳过或误判顺序。正确做法是：
- 用
flexbox或grid实现“粘性页脚”（sticky footer），确保 DOM 顺序与视觉顺序一致 - 避免给
footer设置display: none或visibility: hidden—— 即使视觉隐藏，辅助技术仍可能读出内容，造成混淆 - 如果页脚含链接，确保对比度 ≥ 4.5:1；小字号文字（如版权行）至少 12px，否则 WCAG 会报错
真正容易被忽略的是作用域判断：很多人把“页面底部”等同于“footer”，结果把整个底部区域都包进一个 footer，里面塞导航、广告、订阅框……语义一塌糊涂。记住，footer 是“谁的结尾”，不是“在哪结尾”。
