当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5footer标签怎么用？

HTML5footer标签怎么用？

2026-01-20 13:45:42 0浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《HTML5 footer标签通常用于放置页面底部信息，如版权信息、联系方式、网站导航链接、隐私政策、使用条款等。根据页面内容和设计需求，可以灵活添加相关元素。示例结构：

footer标签语义明确，仅容当前页面或文章直接相关的元信息、导航、联系入口等；禁放全站广告、无关外链、重复主导航及“回到顶部”按钮；须按作用域（body/article/section）嵌套，确保DOM与视觉顺序一致。

HTML5footer标签放什么信息_页面底部内容规范【说明】

footer 标签不是“随便塞版权信息的地方”，它有明确的语义边界：只应包含与当前页面或当前文章直接相关的元信息、导航、联系入口等，不能放全站通用的广告、无关外链或重复的主导航。

哪些内容适合放进 `footer` 标签

浏览器和屏幕阅读器会把 footer 当作当前范围（页面级或文章级）的结尾元区域，因此内容必须具备“收尾属性”：

当前页面的版权信息，如 © 2024 MySite. All rights reserved.
当前页面的更新时间，如 Updated May 20, 2024
指向本页相关文档的链接：隐私政策、使用条款、网站地图（仅当它们是本页上下文的一部分）
当前文章底部的作者信息、分类标签、相关文章推荐（如果 footer 出现在 article 内部）
联系方式（邮箱、地址）——但仅限该页面所代表实体的联系信息，比如“关于我们”页的 footer 可以放公司地址，“博客文章”页的 footer 不应放公司地址除非明确归属

哪些内容绝对不该放

违反语义会导致 SEO 降权、辅助技术误读、甚至被 Lighthouse 标记为“结构错误”：

全站主导航（应该放在 nav 或 header 中）
无关第三方广告、推广横幅
重复的社交媒体图标（除非是本页作者/发布者的专属社交链接）
“回到顶部”按钮（语义上属于交互控件，建议用 button + ARIA，不要塞进 footer 充数）
多个 footer 嵌套（HTML5 不禁止，但无意义；一个页面通常只需一个页面级 footer，article 或 section 内可另有一个局部 footer）

`footer` 的嵌套与作用域怎么判断

HTML5 规定：footer 总是关联到其最近的祖先节（section、article、body）。它的内容语义由父容器决定：

<article>
  <h2>如何配置 Webpack</h2>
  <p>…正文…</p>
  <footer>
    <p>作者：张三 &nbsp;|&nbsp; 发布于 <time datetime="2024-04-12">Apr 12, 2024</time></p>
  </footer>
</article>

<footer>
  <p>&copy; 2024 技术博客团队</p>
</footer>

上面例子中，第一个 footer 属于 article，描述的是这篇文章的元数据；第二个 footer 是 body 的子元素，代表整页的页脚。两者层级不同、语义不混用。

CSS 布局与可访问性提醒

视觉上 footer 常被固定在页面最下方，但别用 position: fixed 强行压底——这会破坏文档流，导致屏幕阅读器跳过或误判顺序。正确做法是：

用 flexbox 或 grid 实现“粘性页脚”（sticky footer），确保 DOM 顺序与视觉顺序一致
避免给 footer 设置 display: none 或 visibility: hidden —— 即使视觉隐藏，辅助技术仍可能读出内容，造成混淆
如果页脚含链接，确保对比度 ≥ 4.5:1；小字号文字（如版权行）至少 12px，否则 WCAG 会报错

真正容易被忽略的是作用域判断：很多人把“页面底部”等同于“footer”，结果把整个底部区域都包进一个 footer，里面塞导航、广告、订阅框……语义一塌糊涂。记住，footer 是“谁的结尾”，不是“在哪结尾”。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。