footer标签必须直接嵌套在section内且为最后一个子元素，才能语义化表示该section的结尾信息；若被div包裹、提前闭合或混入全局内容，将破坏语义归属与辅助技术解析。

footer 标签放在 section 里，就代表“这个 section 的结尾信息”，不是视觉位置，而是语义归属。 它必须紧贴该 section 的末尾内容，不能被其他包裹元素隔开，否则浏览器和辅助技术可能误判归属层级。

section 内部 footer 的语义边界

当 <footer></footer> 直接嵌套在 <section></section> 标签内部、且是其最后一个子元素时，它就被解析为该 section 的元数据区域。例如：

• 一个产品介绍 section 的 footer 可以放“立即购买”按钮或规格下载链接
• 一个 FAQ section 的 footer 可以放“提交新问题”表单入口
• 一个教程步骤 section 的 footer 可以放“下一步：实战练习”导航

这些内容都属于该 section 的收尾动作或补充说明，而非全站通用功能。

必须避免的嵌套错误

常见结构误用会直接破坏语义逻辑：

前端开发规范

企业级前端开发规范 Skill，包含命名、目录、CSS/JS/TS、Vue/React、Git、构建、性能、安全完整规范

下载

• 在 <section></section> 内部又套一层 <div>，再把 <code><footer></footer> 放进 div —— 这会让 footer 脱离 section 的语义范围，可能被归到外层容器
• 把主导航、客服浮窗、广告 banner 塞进 section 的 footer —— 它们不属于该区块的“结尾信息”，属于干扰性内容
• section 内容还没结束，footer 就提前出现 —— 比如文字还没写完，footer 已闭合，后续段落会被浏览器当作 footer 的子内容解析

内容规范：什么能放，什么不能放

section 级 footer 应承载与该区块强相关的操作或元信息：

• ✅ “查看更多同类案例”链接（仅限本 section 主题）
• ✅ “本模块数据来源：国家统计局 2024 年报告”
• ✅ “编辑此部分”按钮（CMS 场景下）
• ❌ 全站备案号（应放在 body 级 footer）
• ❌ 微信公众号二维码（除非该 section 明确是“关注我们”模块）
• ❌ “回到顶部”按钮（交互控件，无语义收尾属性）

闭合与 DOM 结构必须严谨

不写 或误写成 <footer></footer>，会导致整个后续 HTML 被吞进该 footer 中：

• JS 查询 document.querySelector('section footer') 可能返回 null 或包含意外内容
• CSS 的 footer { margin-top: 1rem; } 会失效或作用于错误范围
• 屏幕阅读器会把后续所有正文读作“该 section 的页脚内容”

务必在 DevTools 的 Elements 面板中确认 footer 节点有明确起止，并且父级确实是目标 <section></section>。