HTML Living Standard/footer
footer 要素
[編集]<footer> 要素は、HTML文書やセクションのフッター（締めくくり部分）を定義するために使用されるセマンティック要素です。通常、著作権情報、関連リンク、連絡先情報、セクションの要約などを含みます。
概要
[編集]- 役割: 文書全体や各セクションの末尾部分に配置され、文書やセクションの補足情報を提供します。
- 複数の使用:
<footer>要素は、文書全体だけでなく、各セクション（例:<article>、<section>）にも使用できます。
使用例
[編集]ページ全体のフッターとしての例
[編集]以下の例では、Webページ全体のフッターとして、著作権情報と関連リンクが含まれています。
<footer> <p>© 2025 ウェブサイト名. All rights reserved.</p> <nav> <ul> <li><a href="#privacy-policy">プライバシーポリシー</a></li> <li><a href="#terms-of-service">利用規約</a></li> </ul> </nav> </footer>
セクションごとのフッターとしての例
[編集]<footer> 要素は、特定のセクションや記事に関連する情報を提供するためにも使用できます。
<article> <h2>ブログ記事のタイトル</h2> <p>この記事では、HTMLのセマンティック要素について解説します。</p> <footer> <p>執筆者: 太郎 | 2025年1月6日</p> </footer> </article>
- 許可される親要素: フローコンテンツを持つほぼすべての要素（例:
<body>、<article>、<section>、<aside>など）。 - 含めることが推奨されるコンテンツ:
- 著作権情報
- 法的通知
- 作成者またはセクションに関連する情報
- ナビゲーションリンク
属性
[編集]<footer> 要素は、グローバル属性をサポートします。
グローバル属性の例
[編集]以下の例では、class と id 属性を使用してスタイリングやスクリプト操作を容易にしています。
<footer id="site-footer" class="main-footer"> <p>© 2025 サイト名</p> </footer>
使用上の注意
[編集]<footer>要素は、主に補足的な情報を提供するために使用しますが、セクションの主要なコンテンツを含めるべきではありません。<footer>要素を<header>要素や<address>要素の子要素として配置することはできません。
ベストプラクティス
[編集]- 適切な情報を含める: フッターには、著作権、連絡先情報、または文書全体に関連する補足的なリンクを配置します。
- 一貫性を保つ: 各セクションやページ全体で一貫したスタイルと目的を持った
<footer>要素を使用します。 - 簡潔にする: フッターは補足的な役割を果たすため、情報は簡潔かつ関連性のある内容に限定します。
アクセシビリティの考慮
[編集]<footer> 要素を適切に使用することで、スクリーンリーダーなどの支援技術が文書の構造を理解しやすくなります。特に、重要なリンクや情報をわかりやすく配置することが推奨されます。
例外的な使用
[編集]以下のような場合、複数の <footer> 要素を使用することが考えられます:
- ページ全体のフッター
- 各記事やセクションごとのフッター
まとめ
[編集]<footer> 要素は、文書全体やセクションの末尾部分を意味論的に定義するために重要な要素です。適切に使用することで、文書の構造がわかりやすくなり、ユーザビリティやアクセシビリティが向上します。