应使用语义化标签而非，因其明确标识页脚区域，提升无障碍访问、seo及自动化工具识别；可置于或/内，内容须为版权、作者、联系方式等关联信息，避免导航、广告等主交互内容。
footer 标签不是存储容器，而是语义化地标识页面底部区域；它本身不保存数据，但能显著提升屏幕阅读器识别效率和搜索引擎对页脚内容的理解能力。
为什么不能用 div 加 class 模拟页脚
视觉上可能看不出区别，但实际影响很大：
- 屏幕阅读器无法将
div class="footer"识别为“页脚”，用户必须逐行听完整个区块才能判断这是版权信息还是导航链接 - 搜索引擎弱化该区域内容的权重，ICP备案号、社交链接等关键元信息容易被忽略
- 浏览器原生支持的区域跳转快捷键（如 JAWS 的
Insert + F7列出所有footer）完全失效 - 部分无障碍测试工具（如 axe、Lighthouse）会直接报出“缺少语义化页脚”错误
footer 应该放在什么位置才合法且有效
HTML 规范要求 footer 必须是语义上下文中的“结尾容器”，常见合法嵌套方式有：
- 作为
body的直接子元素：适用于全站统一的页脚（最常见） - 嵌套在
article或section内部：表示该文章或章节自己的结尾信息（如作者署名、发布时间、相关推荐） - 不能作为
header、nav或aside的子元素——这些标签自身已有明确语义边界 - 避免包裹整个页面底部“视觉区块”：如果里面混着主导航、产品分类等主路径内容，应拆出
nav或section单独标记
页脚里哪些内容需要进一步语义标注
只用 footer 包裹还不够，内部结构也要讲语义：
- 站点地图链接组应包在
nav aria-label="站点地图"中，而非裸露的ul - 社交图标链接建议用
a+aria-label（如aria-label="关注我们的微博"），避免仅靠图标或文字“微博”二字 - ICP备案号建议用
span包裹并添加aria-hidden="true"（因纯机器可读编号对屏幕阅读器无意义，但需保留在 DOM 中供爬虫抓取） - 若页脚含联系邮箱或电话，可用
a href="mailto:...">和a href="tel:...">，比纯文本更利于移动设备识别和调起对应应用
最容易被忽略的是：一个页面可以有多个 footer（比如每个 article 都有自己的），但全局页脚必须是 body 直接子元素；否则辅助技术可能无法将其识别为“页面级底部”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
