footer是所属节的结尾元信息容器，必须正确嵌套闭合；版权用标记附属细则，站点地图需用<nav>加列表组织，禁止塞入导航、广告等违义内容。
footer 标签不是“页面最底下那块区域”，而是“它所属节的结尾元信息容器”——放错位置或塞错内容，会直接让屏幕阅读器读错、SEO 结构化数据失效、JS 拿不到元素。
footer 必须闭合且嵌套在正确祖先元素里
不闭合 <footer> 会导致后续所有 HTML 被浏览器吞进该标签内部，document.querySelector('footer') 查不到，CSS 的 footer p 选不到，<small> 语义也全乱套。常见现象是版权文字突然出现在 <header> 里，或者整个页脚塌陷成一行。
-
<body><main></main><footer>© 2026</footer></body>✅ 正确：作为<body>直接子元素，代表全站页脚 -
<body><main><footer>© 2026</footer></main></body>❌ 错误：这是<main>的页脚，不是页面级页脚；<main>默认有 margin 和 display 行为，会截断宽度 -
<article><h2>标题</h2><p>正文</p><footer><p>作者：李四</p></footer></article>✅ 正确：紧贴<article>内容结尾，不被<div>或<section>隔开 -
<article><footer><div class="meta"><p>作者：李四</p></div></footer></article>❌ 错误：语义归属断裂，<footer>的作用域变成那个<div>，而<div>不是 sectioning 元素
版权信息该用 <small> 还是 <p> 包？
<small> 不是“字体小”，是 W3C 明确定义的“附属细则”语义，专用于法律条款、版权声明、备案号这类次要但需保留的信息。它和 <footer> 是互补关系，不是替代关系。
- 纯版权行：
<footer><small>©2026 My Site. All rights reserved.</small></footer>✅ 精准语义 - 多条版权（主站+子产品）：
<footer><small>© 2026 Main Site</small><small>© 2026 Product X</small></footer>✅ 合理分层 - 别用
<small>包导航链接、邮箱、电话——那些是主要可操作内容，不该弱化 - 别用
<address>包版权文字：<address>© 2026</address>❌<address>只用于物理/电子联系方式，误用会误导辅助技术
站点地图链接必须用 <nav> + 列表组织
页脚里的“站点地图”不是 XML 文件，是面向用户的快捷导航入口。堆成一排链接不仅破坏键盘导航流，还会稀释 SEO 权重。搜索引擎和屏幕阅读器依赖清晰结构识别路径层级。
立即学习“前端免费学习笔记（深入）”；
- 每组链接必须用
<nav>包裹，并加aria-label，例如：<nav aria-label="产品导航"> - 组标题用
<h3>或<p>，不能省略：<h3>产品</h3> - 链接必须用
<ul><li>组织，禁止写成<a>首页</a><a>关于</a><a>联系</a> - 总链接数建议控制在 12–15 个以内；高频路径优先：隐私政策、服务条款、联系方式、ICP 备案号
哪些内容绝对不该放进 <footer>
违反语义边界的内容，轻则被 Lighthouse 标记为“结构错误”，重则导致 Google Search Console 将文章页脚识别为站点级版权，造成结构化数据错乱。
- 全站主导航（应放在
<header>或独立<nav>中） - 无关第三方广告、推广横幅（footer 不是广告位）
- 重复的社交媒体图标（除非是当前文章作者专属社交链接）
- “回到顶部”按钮（语义上属于交互控件，建议用
<button>+ ARIA，不要塞进 footer 充数） - 把全站 ICP 备案号、公司地址塞进
<article>内部的<footer>（这属于 address 级信息，应归属到页面级<footer>或<address>）
最容易被忽略的一点：多个 <footer> 嵌套本身合法，但无实际意义；一个页面通常只需一个页面级 <footer>，<article> 或 <section> 内可另有一个局部 <footer> ——关键在归属清晰，不在数量。
