<footer>嵌套在<section>中表示该区块的语义结尾，用于承载依附于该区块的操作按钮、补充说明、提交引导或数据来源等局部信息，而非全局页脚；一个section仅应有一个footer，且不可包含导航等全局性内容。
footer 标签在 section 中的用途，核心是表达“这个区块的结尾信息”，不是为了视觉下沉，而是为了语义明确。
section 里的 footer 是什么
当 <footer> 嵌套在 <section> 内部时，它就属于这个 section 的页脚，代表该内容区块的收尾部分。比如一个“产品功能介绍”区域，它的结尾可能是一组操作按钮或延伸入口——这些内容逻辑上依附于该 section，而非整页。
- 它不改变页面布局，位置由 CSS 控制，语义归属才关键
- 一个 section 只应有一个 footer，重复使用会破坏结构清晰度
- 不能把主导航、主搜索框这类全局性功能塞进来——那是
<nav>或<header>的职责
典型适用场景
常见且合规的用法包括：
-
功能模块末尾的操作区：例如
<section class="pricing">...<footer><a href="/contact">立即咨询</a></footer></section> - 图文列表的补充说明：如“最新动态”板块底部加一句“数据更新至 2026 年 6 月”，适合包在 footer 里
-
表单区域的提交引导：
<section id="subscribe-form">...<footer><button type="submit">订阅 newsletter</button></footer></section> - 图表或数据看板的来源标注：在可视化 section 底部注明“数据来源：国家统计局 2026Q1”，语义上就是该图表的归属信息
和页面级 footer 的区别
放在 <body> 直接子级的 footer 表示全站页脚，含版权、备案号、隐私政策等；而嵌在 <section> 里的 footer 只服务于它所处的那个局部内容块。两者可以共存，互不干扰。
- 页面级 footer：必须含真正全局性信息，比如
© 2026 公司名称. 京ICP备XXXX号 - section 级 footer：内容范围窄、针对性强，脱离该 section 就失去意义
- 二者都需闭合完整，且不能相互嵌套（比如 section 的 footer 里再放一个 body 级 footer）
怎么写才不出错
避免常见陷阱：
- 不要只为了“看起来在底部”而硬塞进 section —— 如果里面放的是广告位或无关推荐，就违背了语义初衷
- 别用
<footer><nav>...</nav></footer>，导航不是页脚的子集，应单独用<nav>并合理放置 - 确保 footer 是 section 的直接子元素或合理后代，不要跨层级错位嵌套
- 如果 section 内容为空或动态加载中，footer 仍应保留在 DOM 结构中，仅靠 CSS 控制显隐，而非删掉标签
