在HTML5规范里，footer元素被用来定义文档或者某个章节的页脚区域。它并不是只能放在页面最底端，只要是属于某个内容块的结尾信息，都可以用footer来包裹。常见的内容包括版权文字、作者信息、相关文章链接、备案号等。
footer标签的基础语义
footer的核心价值在于语义化，而不是视觉样式。过去开发者习惯写<div class="footer">，浏览器和爬虫只能靠类名猜测这是页脚，而footer标签则明确告诉解析器：这一块是结尾内容。对于使用辅助技术的用户，语义标签能显著提升导航效率。
需要注意的是，footer并不改变页面的默认布局表现，它默认是块级元素，和普通div在外观上没区别。如果你希望它固定在页面底部，仍然需要额外编写CSS。语义和样式是两件独立的事，不能因为加了footer就以为浏览器会自动排版到最下边。
整页页脚的使用方式
最常见的场景是把全站通用的结尾信息放在body的直接子元素footer中。下面是一段基础用法，展示了版权与简链的结构：
<body>
<header>网站头部</header>
<main>
<p>正文内容区域</p>
</main>
<footer>
<p>© 2024 示例站点 版权所有</p>
<nav>
<a href="https://ipipp.com/about">关于我们</a>
<a href="https://ipipp.com/contact">联系我们</a>
</nav>
</footer>
</body>
上面的代码把版权和导航放进footer，爬虫能更直接地识别站点边界信息。相比只用div，这种写法在可访问性审计工具里通常得分更高。
不过要避免过度使用，比如把每一个小卡片的底部按钮区都写成footer，这会让语义变混乱。整页footer一般只有一个，作为body的直接子级最清晰。
章节级footer的用法
除了全页页脚，footer也能作为article或section的结尾。例如一篇博客文章，可以在文章末尾放作者信息与发布时间：
<article>
<h1>如何理解HTML语义化</h1>
<p>语义化是指用正确的标签表达内容含义……</p>
<footer>
<p>作者：张三</p>
<p>发布于：2024-03-12</p>
</footer>
</article>
这种写法让每篇文章自成一体，屏幕阅读器在读到footer时会提示章节结束。如果页面上有多篇文章，各自的footer互不冲突，因为它们处于不同的article上下文中。
但要记住，footer不能再嵌套footer，也不能放在header内部。规范明确禁止这种嵌套，否则校验工具会报错，也会影响语义解析的准确性。
与div写法的对比
为了看清差异，我们把同一种页脚用两种方式写出来对比：
| 写法 | 代码示例 | 语义明确度 |
|---|---|---|
| 非语义div | <div class="footer">版权</div> | 低，依赖类名约定 |
| 语义footer | <footer>版权</footer> | 高，标签即含义 |
从维护角度看，footer标签减少了CSS类名的沟通成本。新成员看到标签就知道这是页脚，而不必去翻样式表确认footer类的作用。
在SEO层面，虽然主流搜索引擎不会仅因用了footer就大幅提权，但清晰的结构有助于抽取联络信息与版权声明，对站点信任度有细微正面作用。
常见误区与注意事项
有人误以为footer必须固定在视窗底部，于是写满position:fixed样式，结果遮盖了正文。实际上footer只是语义容器，定位完全靠CSS控制。如果要做吸底效果，需要配合flex或grid布局，而不是标签本身的能力。
还有人把全站脚本引入写在footer里就认为万事大吉，但footer标签和脚本位置没有绑定关系。脚本放页面底部是为了性能，放footer内部只是巧合式的结构选择，语义上footer并不承担加载脚本的职责。
小结与代码示例
综合来看，使用footer的关键是想清楚这块内容是不是某个范围的结尾信息。下面给出一个包含全页与章节footer的较完整模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>footer示例</title>
</head>
<body>
<main>
<article>
<h2>文章标题</h2>
<p>一些正文内容。</p>
<footer>
<p>作者：李四</p>
</footer>
</article>
</main>
<footer>
<p>© 站点名称</p>
<address>联系邮箱：user@ipipp.com</address>
</footer>
</body>
</html>
这个例子里，article内部的footer描述单篇文章信息，body下的footer描述全站信息，层级清楚且符合规范。只要把握住语义边界，footer就能成为你排版中简单却实用的标签。