<footer>：頁尾元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<footer> HTML 元素表示其最近的章節型內容或章節根元素的頁尾。<footer> 通常包含有關該章節作者的信息、版權數據或與相關文檔的鏈接。

嘗試一下

<article>
  <h1>How to be a wizard</h1>
  <ol>
    <li>Grow a long, majestic beard.</li>
    <li>Wear a tall, pointed hat.</li>
    <li>Have I mentioned the beard?</li>
  </ol>
  <footer>
    <p>© 2018 Gandalf</p>
  </footer>
</article>

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;
}

屬性

此元素僅包含全域屬性。

使用注意事項

  • 將有關作者的信息置於可以包含在 <footer> 元素中的 <address> 元素中。
  • 當最近的祖先章節型內容或章節根元素是 body 元素時，頁尾應用於整個頁面。
  • <footer> 元素不是章節型，因此在大綱中不引入新的節。

範例

html
<body>
  <h3>FIFA World Cup top goalscorers</h3>
  <ol>
    <li>Miroslav Klose, 16</li>
    <li>Ronaldo Nazário, 15</li>
    <li>Gerd Müller, 14</li>
  </ol>

  <footer>
    <small>
      Copyright © 2023 Football History Archives. All Rights Reserved.
    </small>
  </footer>
</body>
css
footer {
  text-align: center;
  padding: 5px;
  background-color: #abbaba;
  color: #000;
}

無障礙議題

在 Safari 13 之前的版本中，contentinfo 標誌角色未能被 VoiceOver 正確顯示。如果需要支持舊版 Safari 瀏覽器，請在 footer 元素中添加 role="contentinfo"，以確保該標誌能夠被正確顯示。

技術摘要

內容類型 流內容、捫及內容。
允許的內容 流內容，但不得包含 <footer> 或 <header> 的後代元素。
標籤省略 不允許，開始和結束標籤都是必須的。
允許的父元素 任何接受 流內容 的元素。請注意，<footer> 元素不得是 <address>、<header> 或另一個 <footer> 元素的後代。
隱含 ARIA 角色 contentinfo，或者如果是 article、aside、main、nav 或 section 元素的後代，或具有 role=article、complementary、main、navigation 或 region 的元素，則隱含為 generic。
允許的 ARIA 角色 group、presentation 或 none。
DOM 介面 HTMLElement

規範

Specification
HTML
# the-footer-element

瀏覽器相容性

BCD tables only load in the browser

參見