HTML の <footer> 要素 は、直近の区分コンテンツまたは区分化ルート要素のフッターを表します。フッターには通常、そのセクションの著作者に関する情報、関連文書へのリンク、著作権情報等を含めます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
| コンテンツカテゴリ | フローコンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 | フローコンテンツ。但し、他の <footer> や <header> の子孫がないもの。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。ただし、 <address>, <header>, 他の <footer> の子孫要素として配置してはならない。 |
| 許可されている ARIA ロール | group, presentation |
| DOM インターフェイス | HTMLElement |
属性
この要素にはグローバル属性のみがあります。
使用上のメモ
- セクションの著作者や編集者の連絡先情報は、多くの場合
<footer>要素内に<address>要素として配置します。 <footer>要素は区分コンテンツではありません。つまり、この要素が新たなアウトラインを生成することはありません。
例
<footer> Some copyright info or perhaps some author info for an <article>? </footer>
アクセシビリティの考慮事項
VoiceOver 読み上げソフトには、 landmark rotor で footer の landmark role がアナウンスされないという問題があります。これを表すには、 role="contentinfo" を footer 要素に追加してください。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard <footer> の定義 |
現行の標準 | |
| HTML5 <footer> の定義 |
勧告 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
footer | Chrome 完全対応 5 | Edge 完全対応 あり | Firefox 完全対応 4 | IE 完全対応 9 | Opera 完全対応 11.1 | Safari 完全対応 4.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 11.1 | Safari iOS 完全対応 4.2 | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応