<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> 通常包含有關該章節作者的信息、版權數據或與相關文檔的鏈接。

嘗試一下

屬性

此元素僅包含全域屬性

使用注意事項

  • 將有關作者的信息置於可以包含在 <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,或者如果是 articleasidemainnavsection 元素的後代,或具有 role=articlecomplementarymainnavigationregion 的元素,則隱含為 generic
允許的 ARIA 角色 grouppresentationnone
DOM 介面 HTMLElement

規範

Specification
HTML
# the-footer-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
footer

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參見