footer是语义化标签,表示所属内容区块的结尾部分,而非视觉底部容器;应用于body、article或section等元素内,承载版权、元信息或章节补充说明,不可用于布局、导航或无关广告。

footer 标签不是“网页底部的容器”,而是语义化标记,表示一个内容区块的结尾部分。
什么时候该用 footer?
它不绑定页面最下方位置,而绑定“所属内容范围”的结尾:
- 整个
的footer→ 网站全局页脚(如版权信息) - 某个
<article></article>内部的footer→ 仅该文章的作者、发布时间、标签等元信息 - 某个
<section></section>下的footer→ 该章节的补充说明或操作按钮
常见错误是把所有底部区域都塞进一个全局 footer,结果破坏了语义结构——搜索引擎和读屏软件会误判内容归属。
footer 里不能放什么?
它不是布局工具,禁止用来撑高度或实现视觉“底部固定”:
立即学习“前端免费学习笔记(深入)”;
- 别用
footer替代<div class="footer"> 做 CSS sticky 布局(应配合 <code>position: sticky或 flex 布局) - 别在
footer里塞主导航、主搜索框——这些属于网站导航范畴,该用<nav></nav> - 别把它当通用容器:广告位、相关推荐、多语言切换栏,若不属于当前内容区块的“结尾信息”,就不要放进来
-
header是内容区块的“起始部分”,不一定是顶部(比如侧边栏顶部也可用) -
aside是附属内容,和主内容并列但非核心,比如文章旁的作者简介卡片 -
footer必须依附于某个明确的内容上下文,孤立使用(如直接放在外)会削弱可访问性
错误示例:<footer><nav>…</nav></footer> —— 导航不是页脚的语义子集。
和 header、aside 的关系容易搞混
三者都是语义容器,但作用域不同:
典型陷阱:给一个 <aside></aside> 单独加 footer,却没包裹在 <aside></aside> 内部 → 语义断裂,AT(辅助技术)无法识别归属。
真正难的是判断“这个信息到底属于谁的结尾”。写完 footer 后,反问一句:删掉它,上面那段内容是否依然完整独立?如果答案是否定的,那它大概率放对了。











