HTML footerタグの使い方｜フッターに書くべき内容とはを初心者向けにやさしく解説
生徒
「Webページの一番下にある部分って、何のためにあるんですか？」
先生
「あそこはfooterタグで表すことが多く、ページの締めくくりとして大切な情報をまとめる場所です」
生徒
「下にあれば全部footerタグで囲めばいいんですか？」
先生
「見た目ではなく役割で判断するのがポイントです。footerには向いている内容があります」
1. HTMLのfooterタグとは何か
footerタグは、ページや文章の最後に置かれる情報を表すHTMLのセマンティックタグです。セマンティックとは、意味を持たせて構造を伝える考え方のことです。footerタグを使うことで、「ここは補足情報や締めくくりの部分です」と人や検索エンジンに伝えられます。多くの場合、コピーライト表記や関連リンクなどが入ります。
2. フッターはページのどんな役割を持つのか
フッターは、本でいうと奥付や最後のページに近い存在です。本文を読み終えたあとに、運営者情報や注意書きなどを確認できます。ページ全体を読んだ人が次にどう行動すればよいかを示す役割もあります。そのため、footerタグは単なる飾りではなく、情報整理のための大切な場所です。
3. footerタグとSEOの関係
SEOとは、検索エンジンでページを見つけてもらいやすくする工夫のことです。footerタグを正しく使うことで、検索エンジンは「これは補足情報だ」と判断できます。本文と区別されるため、ページの構造が分かりやすくなります。構造が整理されたHTMLは、内容を正確に理解してもらいやすくなります。
4. footerタグに書く代表的な内容
footerタグには、ページ全体の補足となる情報を書きます。代表的なものとして、コピーライト表記、運営者名、簡単な説明文などがあります。これらは本文ほど目立たせる必要はありませんが、信頼性を高めるために重要です。誰が運営しているページなのかが分かると、安心して読めます。
<footer>
<p>© 2026 サンプルサイト</p>
</footer>
5. フッターにリンクを置く場合
footerタグには、関連ページへのリンクをまとめて置くこともよくあります。例えば、利用規約やプライバシーに関するページなどです。本文中に置くと読みづらくなる情報を、フッターにまとめることでページ全体がすっきりします。これは整理整頓された部屋の収納と同じ考え方です。
<footer>
<ul>
<li><a href="#">利用規約</a></li>
<li><a href="#">プライバシーポリシー</a></li>
</ul>
</footer>
6. articleやsection内のfooter
footerタグは、ページ全体だけでなく、articleやsectionの中でも使えます。その場合は、その内容に対する補足情報を表します。例えば、記事の投稿日や著者名などです。一つ一つの記事に締めくくりを付けるイメージを持つと理解しやすくなります。
<article>
<p>ここに記事の本文が入ります。</p>
<footer>
<p>投稿日 2026年1月</p>
</footer>
</article>
7. footerタグで避けたい使い方
footerタグには、ページの中心となる内容を書かないようにしましょう。重要な説明やメインの文章を入れてしまうと、構造が分かりにくくなります。また、見た目を下に配置したいだけの理由でfooterタグを使うのも避けるべきです。役割を意識することが大切です。
8. footerタグを正しく使うメリット
footerタグを正しく使うことで、ページ全体の構造が整理されます。検索エンジンにとっても内容が理解しやすくなり、SEOの面でも良い影響があります。また、読み手にとっても情報を探しやすくなり、安心感のあるページになります。初心者のうちから意識しておきたい基本の考え方です。
<footer>
<img src="/img/sample150-100.jpg" alt="サイトロゴ">
<p>運営 サンプル学習サイト</p>
</footer>
