<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> 要素内に <address> 要素として配置します。
  • 区分コンテンツや区分化ルート要素の最も近い祖先が本体要素の場合、フッターはページ全体に適用されます。
  • <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 ブラウザーに対応する必要がある場合は、 role="contentinfo"footer 要素に追加して、ランドマークが適切に表示されるようにしてください。

技術的概要

コンテンツカテゴリー フローコンテンツ, 知覚可能コンテンツ
許可されている内容 フローコンテンツ。ただし、子孫に他の <footer><header> がないもの。
タグの省略 なし。開始および終了タグは両方とも必須です。
許可されている親要素 フローコンテンツを受け入れるすべての要素。ただし、 <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

ブラウザーの互換性

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

関連情報