HTML <footer> 元素表示其最近的祖先分段内容的页脚或分段根元素。<footer> 通常包含有关该部分作者、版权数据或相关文档链接的信息。

{{InteractiveExample("HTML Demo: <footer>", "tabbed-standard")}}

```html interactive-example

How to be a wizard

  1. Grow a long, majestic beard.
  2. Wear a tall, pointed hat.
  3. Have I mentioned the beard?

© 2018 Gandalf


```css interactive-example
article {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

footer {
  display: flex;
  justify-content: center;
  padding: 5px;
  background-color: #45a1ff;
  color: #fff;
}

属性

该元素仅包含全局属性。

使用说明

  • 在 {{HTMLElement("address")}} 元素中包含有关作者的信息，该元素可以包含在 <footer> 元素中。
  • 当最近的祖先分段内容或分段根元素是 body 元素时，页脚适用于整个页面。
  • <footer> 元素不是分段内容，因此不会在大纲中引入新的分段。

示例

<body>
  <h3>FIFA 世界杯最佳射手</h3>
  <ol>
    <li>米罗斯拉夫 · 克洛泽，16</li>
    <li>罗纳尔多 · 纳扎里奥，15</li>
    <li>格尔德 · 穆勒，14</li>
  </ol>

  <footer>
    <small> 版权所有 © 2023 足球历史档案馆。保留所有权利。 </small>
  </footer>
</body>

footer {
  text-align: center;
  padding: 5px;
  background-color: #abbaba;
  color: #000;
}

{{EmbedLiveSample('示例')}}

无障碍考虑

在 Safari 13 发布之前，contentinfo 地标角色无法通过 VoiceOver 正确显示。如果需要支持传统的 Safari 浏览器，请在 footer 元素中添加 role="contentinfo" 以确保正确显示地标。

技术概要

内容分类 流式内容、可感知内容。
允许的内容 流式内容，但不可以有 <footer> 或 {{HTMLElement("header")}} 后代。
标签省略 不允许，开始和结束标签都是必需的。
允许的父元素 任何接受流式内容的元素。请注意，<footer> 元素不得是 {{HTMLElement("address")}}、{{HTMLElement("header")}} 或其他 <footer> 元素的后代。
隐式 ARIA 角色 contentinfo 或 generic 如果是 article、aside、main、nav 或 section 元素的后代，则为 contentinfo 或 generic，或一个具有 role=article、complementary、main、navigation 或 region 的元素
允许的 ARIA 角色 group、presentation 或 none
DOM 接口 HTMLElement