SEO 百科

header 与 footer

本页目录

header 与 footer

header 与 footer，是一对成对出现的区块元素：<header> 放介绍性内容，<footer> 放收尾性内容，它们的作用范围是最近的分区内容或整个文档[1][2]。同一个页面可以有多个，文章卡片内部也能各有一对。

各自装什么

<header> 常见内容是站点名、栏目标题、站内检索入口与面包屑。<footer> 常见内容是版权行、备案信息、联系方式、站点级导航[2]。规范并不限定内容种类，判断依据是"这段是不是介绍或收尾"。

与地标角色的关系

位于文档顶层、且没有嵌在 article、aside、main、nav 内部的 <header>，会自动形成 banner 地标；同层的 <footer> 形成 contentinfo 地标[3]。屏幕阅读器用户靠这组地标在页面块之间跳。

WAI-ARIA 实践指南给出一条数量经验值：一页的地标区域最好在 7 个以内，地标过多反而失去导航价值[3]。文章卡片里每篇都写一对 <header>、<footer> 不会生成 banner 与 contentinfo，这是设计如此[3]。

与搜索的关系

站点级页脚会在每个页面重复出现，其中的文字不足以区分页面。做区分要看每页独有的标题与正文[4]。版权行与备案链接放页脚是常见做法，正文不要塞进页脚，那里通常是低辨识区。

data-nosnippet 属性可以给某一块内容设上限，页脚的重复信息不必由它处理，但要让摘要只取正文时可以用[5]。

常见误用

第一种是把主导航包进 <footer>，同一组链接在地标层出现两份。第二种是整页只有一个 <div>，页头页尾都靠 class 名区分，机器读不出结构[6]。第三种是在 <header> 里放文章正文，位置与作用相反。

附录

参见

参考资料

官方（境外）

  1. 《<header>：页眉元素》，MDN Web 文档。
  2. 《<footer>：页脚元素》，MDN Web 文档。
  3. 《Landmarks Pattern》，W3C WAI-ARIA Authoring Practices Guide。
  4. 《影响搜索结果中的标题链接》，Google 搜索中心。
  5. 《了解搜索结果中的摘要》，Google 搜索中心。
  6. 《Introduction to Web Accessibility》，W3C Web Accessibility Initiative。

外部链接