HTMLのフッター（Footer）は、<footer>タグを使って定義され、ウェブページやページ内セクションの下部に表示されるコンテンツの領域を指します。フッターは通常、著作権情報、連絡先情報、サイトマップ、バックリンク、ドキュメントや親セクションへの参照など、ページに関連する補足情報を含みます。
<footer>タグの特徴
HTMLでの<footer>要素はウェブページや文書の一部（セクションや記事など）のフッターを表します。以下は<footer>の主な特徴です：
- 情報の提供:
フッターは通常、著作権情報、法的情報、文書の作成者に関する情報、関連ドキュメントへのリンク、プライバシーポリシー、利用規約へのリンク、お問い合わせ情報など、ページの最後に表示される情報を含みます。 - セクショニングコンテンツ:
<footer>は文書全体やセクショニングコンテンツの最後に配置され、そのセクションに関連する情報を含むことができます。 - アクセシビリティ:
<footer>要素はウェブページのアクセシビリティを向上させるために、ページの最後に配置される情報を示す明確なセマンティックマーカーを提供します。 - 文書のアウトラインには影響しない:
<footer>はページのアウトラインに影響を与えませんが、意味的なマークアップとして重要です。 - 再利用性:
同じウェブサイト内の異なるページで同じ<footer>を再利用することがよくあります。 - 複数回の使用:
一つのページ内に複数の<footer>を使用することができます。例えば、個々の<article>タグや<section>タグ内に独自のフッターを配置できます。 - 見出し要素の含有:
<footer>内には見出し要素（<h1>から<h6>まで）を含めることができますが、これらはそのフッター内のコンテンツの構造を整理するためにのみ使用されるべきです。 - 区別されたスタイリング:
<footer>要素には特定のスタイルを適用して視覚的に区別でき、CSSを使用してフッター専用のスタイリングを行うことができます。
<footer>要素はウェブページの最後に表示される情報をグループ化し、ユーザーがページの最後で追加の情報を見つけることができるようにするために重要です。また、HTML5ではセマンティックな要素であり、ページの構造をより明確にします。
使用方法
HTMLにおいてフッターを使用する際には、<footer>要素を使います。この要素は、ウェブページ全体やセクショニングコンテンツ（<article>、<section>など）の最下部に配置され、通常は著作権情報、法的リンク、ページの作成者情報、サイトマップ、バックトップリンク、連絡先情報などの情報を含みます。
以下は<footer>要素の基本的な使用方法を示す例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<!-- ページの主要コンテンツ -->
<main>
<!-- コンテンツ -->
</main>
<!-- フッターの開始 -->
<footer>
<p>© 2023 あなたの会社名. すべての権利を保有します。</p>
<section>
<h2>サイトマップ</h2>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">私たちについて</a></li>
<li><a href="/products">製品情報</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</section>
<section>
<h2>ソーシャルメディア</h2>
<ul>
<li><a href="https://twitter.com/yourprofile">Twitter</a></li>
<li><a href="https://facebook.com/yourprofile">Facebook</a></li>
<li><a href="https://instagram.com/yourprofile">Instagram</a></li>
</ul>
</section>
<address>
お問い合わせ先: <a href="mailto:info@example.com">info@example.com</a>
</address>
</footer>
<!-- フッターの終了 -->
</body>
</html>この例ではフッターには以下の内容が含まれています。
- 著作権情報:
©は著作権記号を表し、会社名と年を含む一般的な著作権表記を行います。 - サイトマップ: ウェブページの主要な部分へのリンク集。
- ソーシャルメディア: ソーシャルメディアプラットフォームへのリンク集。
- 連絡先情報:
address要素を使用して、電子メールアドレスへのリンクを提供します。
フッターの内容はウェブページやそのコンテキストによって異なりますが、上記の例は一般的なウェブページのフッター構造を示しています。フッターはページの最下部に配置されることが多く、ユーザーがページの末尾で追加情報を探す際のナビゲーションとして機能します。また、<footer>内に<section>や<address>のような他のセマンティックタグを用いることで、コンテンツの意味構造を強化することができます。
注意点
HTMLで<footer>要素の使用にあたって、いくつか注意点があります。
- 独立したコンテンツ:
<footer>は、含まれているセクショニングコンテンツ（例えば、<article>や<section>）に関連する情報を提供すべきです。ページ全体に関する情報は、ページのメイン<footer>にのみ含めるべきです。 - セクショニング要素の使用:
<footer>はセクショニング要素の最後に配置されるべきであり、他のセクショニング要素の中（例えば、<main>や<aside>の中）には配置すべきではありません。 - 文書のアウトライン:
<footer>は文書のアウトラインには影響を与えませんが、ページ内の複数のセクショニングコンテンツに対して独立した<footer>を使用することができます。 - 見出しタグの使用:
<footer>内で見出しタグ（<h1>～<h6>）を使用することは可能ですが、これらはフッター内のコンテンツの構造を整理するためにのみ使用すべきです。ページ全体の主要な見出しは、<header>や<main>に配置することをお勧めします。 - 再利用可能なコンテンツ:
ナビゲーションリンク、著作権情報、サイトマップなどの再利用可能なコンテンツは、<footer>内でよく見られます。これらはページの最後に配置されることで、ユーザーが情報を探しやすくなります。 - アクセシビリティ:
<footer>要素は、スクリーンリーダーなどのアクセシビリティツールがページの構造を理解するのを助けます。適切なセマンティックマークアップを使用することで、アクセシビリティを向上させることができます。 <footer>と<head>の混同を避ける:<footer>は表示されるコンテンツの一部であり、<head>要素（ページのメタデータを含む部分）とは異なります。これら二つを混同しないようにしてください。
<footer>要素はウェブページの最後に追加情報を提供するために重要な役割を果たし、ユーザー体験を向上させるために適切に使用することが重要です。