HTMLのfooterタグとは?初心者向けに意味・役割・基本の書き方をわかりやすく解説

HTML・CSS

ホームページは、英語や記号がたくさん並んでいて難しそうに見えるかもしれません。
HTML を勉強しようと思っても、「何から理解すればいいのだろう」と迷う方も多いでしょう。

実は、ホームページは文字や画像をただ並べて作られているわけではありません。
画面に表示される内容をまとめる bodyタグ の中を、それぞれ役割ごとに区分けしながら構成されています。その区分けに使われるのが「タグ」です。

その中でも、ホームページの最後の情報をまとめる役割を持つのが footerタグ です。
footerタグ は、単にページの一番下を書くためのタグではなく、「この部分はフッターである」という意味を HTML に伝える役割があります。

ここでは、footerタグ の意味や役割、何を書くのか、基本の書き方まで初心者向けにわかりやすく解説します。
footerタグ を通して、HTML は役割ごとにタグで区分けされていることや、ホームページがどのような構造で作られているのかも理解できるようになります。

footerタグとは?

footerタグ とは、HTML でページやコンテンツに関連するフッター部分を表すためのタグです。

ホームページは、文字や画像を表示するだけではなく、それぞれの情報がどのような役割を持つのかをタグによって区分けしながら作られています。
footerタグ は、その中でもページやコンテンツに関連する補足的な情報や管理情報などを表すために使用されます。

例えば、著作権表示、会社情報、お問い合わせ先、サイトマップなど、ホームページを利用する人にとって必要となる情報をまとめる際によく使われます。
ただし、footerタグ は単純に「ページの一番下に置くためのタグ」ではありません。

HTML では、表示される位置ではなく、その部分がどのような意味や役割を持つのかをタグで表します。
footerタグ も「ここはフッターとして扱う情報です」と HTML 上で示すために使用されます。

ここからは、footerタグ の意味や使われる場所、なぜ専用のタグとして用意されているのかを詳しく解説します。

footerタグの意味

footer という言葉は、英語の「foot(足元・下部)」が由来です。
HTML における footerタグ は、ページやコンテンツに関連するフッター情報を表すためのタグです。

例えば、そのページやコンテンツに関する著作権情報、作成者情報、関連リンクなどを含む部分を footerタグ で表します。

コードでは、次のように <footer> と </footer> で囲むことで、その範囲がフッターとして扱われます。

<footer>
  フッターの内容
</footer>

このタグを使うことで、人がコードを確認したときにも、コンピューターが HTML を読み取るコンピューターにも、「この部分はフッターとして関連情報を含む場所である」と理解しやすくなります。

ホームページのどこで使うの?

footerタグ は、一般的なホームページではページ全体の最後に配置されることが多いタグです。

しかし、footerタグ は「必ずページの一番下に置くもの」ではありません。
ある情報のまとまりに対して、その締めくくりとなる情報を表すためにも使われます。

そのため、footerタグ を理解するときは、「下に置くタグ」ではなく、「その情報のまとまりを締めくくる役割を持つタグ」と考えることが大切です。

なぜfooterタグが必要なの?

「わざわざfooterタグを使わなくても、ただ文字を下に書けばいいのでは?」と思うかもしれません。

なぜコンピューターに「ここが足元の情報(締めくくり)です」とわざわざ伝える必要があるのか。その理由は、その情報が「メインの本文」ではなく、「補足や共通の連絡先といった、一段下がった役割の情報」であることをコンピューターに正しく分類させるためです。

もし footerタグ で区分けをしないと、コンピューターはページの本文と、おまけの情報(著作権や会社情報など)をすべて同じ重要度の「メインの文章」として扱ってしまいます。

これが起こると、検索エンジンなどのコンピューターは「このページで一番伝えたい本質(メインテーマ)」が何なのかを正しく判断できなくなります。その結果、本当に検索で見つけてほしい重要なキーワードが、おまけの情報に埋もれてしまい、ホームページが正しく評価されなくなるという不都合が生じるのです。

footerタグ を使って「ここから下は足元の情報です」と教えてあげることで、コンピューターは情報の重要度にメリハリをつけて、ページの本質を正しく理解できるようになります。

footerタグには何を書く?

footerタグ が、ページやコンテンツに関連するフッター情報を表すためのタグであることが分かりました。
では、実際に footerタグ の中には、どのような情報を書くのでしょうか。

結論からいうと、「footerタグには必ずこの内容を書かなければいけない」という決まりはありません。
そのページやホームページの目的に合わせて、利用者に必要な情報を含めます。

ただし、多くのホームページで共通して使われている代表的な情報があります。
ここでは、よく利用される4つの例を紹介します。
これら以外にも、サイトの目的や内容に応じて、さまざまな情報を footerタグ に含めることがあります。

Copyright(著作権表示)

Copyright(コピーライト)は、ホームページに掲載されている文章や画像などの著作物に関する権利を示す表示です。

例えば、「© 2026 ○○ Inc.」のような表記を見たことがある方も多いでしょう。

この表示によって、サイトの著作権を持つ人や企業を明確にできます。
ホームページに関する権利情報を伝えるため、多くのサイトで利用されています。

お問い合わせ

お問い合わせは、ホームページを訪れた人が運営者へ連絡するための情報です。

お問い合わせフォームへのリンクや電話番号、メールアドレスなどを掲載します。

訪問者が「詳しく質問したい」「サービスについて相談したい」と思ったときに、必要な連絡先へすぐ移動できるようにする役割があります。

会社情報

会社情報は、ホームページを運営している企業や団体について伝えるための情報です。

会社名、所在地、電話番号などを掲載するほか、個人で運営しているサイトでは運営者プロフィールへのリンクを用意する場合もあります。

誰が情報を発信しているのかを明らかにすることで、利用者がサイトの運営元を確認しやすくなります。

サイトマップ

サイトマップとは、ホームページ内にあるページを一覧で確認できる情報です。
本でいう「目次」のような役割を持ち、訪問者が目的のページを探しやすくするために利用されます。

ページ数が多いホームページでは、必要な情報へ移動するための案内として役立ちます。

このように、Copyright やお問い合わせ、会社情報、サイトマップは footerタグ でよく利用される代表的な情報です。

ただし、footerタグ に含める内容は、これら4つに限られるわけではありません。
サイトによっては、営業時間、SNSへのリンク、利用規約、プライバシーポリシー、関連ページへのリンクなどを掲載することもあります。

大切なのは、「footerにはこの4つを書く」と覚えることではありません。
そのページやコンテンツを利用する人にとって、どのような情報が必要なのかを考えて含めることが重要です。

footerタグを使うメリット

「フッターの情報を表示するだけなら、ほかのタグでも書けるのでは?」と思う方もいるかもしれません。

確かに、文字やリンクを表示するだけであれば、footerタグ 以外のタグでもホームページを作ることはできます。

しかし、footerタグ を使うことで、ホームページを作る人にも、HTML を学ぶ人にも、ホームページを読み取るコンピューターにも、それぞれメリットがあります。

ページの構造が分かりやすい

ホームページを作る人にとってのメリットです。

footerタグ を使って「ここから下がフッターです」と区分けしておくことで、後から自分でコードを見返したときにも、どこに何を書いたのかをすぐに把握できます。

例えば、「会社情報を修正したい」「お問い合わせ先を変更したい」と思ったときも、footerタグ の中を確認すればよいため、目的の場所を見つけやすくなります。
また、自分だけでなく、他の人がコードを見た場合でも構造を理解しやすくなるため、複数人でホームページを制作するときにも役立ちます。

HTMLの基本が身に付く

HTML を学ぶ人にとってのメリットです。

HTML を学び始めたばかりの頃は、「文字を表示する」「画像を並べる」といった見た目に意識が向きがちです。
しかし、HTML で大切なのは、見た目を作ることだけではありません。「これは見出し」「これは本文」「これはフッター」というように、それぞれの情報へ役割を与えることが HTML の基本です。

footerタグ を正しく使う経験を積むことで、「情報の役割に合わせてタグを選ぶ」という HTML の考え方が自然と身に付きます。

この考え方を理解すると、headerタグ や mainタグ、navタグ など、ほかの意味を持つタグも覚えやすくなり、ホームページ全体の構造を理解しやすくなります。

意味を持つタグを使うメリット

ホームページを読み取るコンピューターにとってのメリットです。

HTML には、文字を囲むためだけのタグだけでなく、それぞれの役割や意味を持つタグがあります。
footerタグ もその一つで、「この部分はフッターに関する情報です」という意味を表します。

このような意味を持つタグを適切に使うことで、ブラウザや検索エンジン、画面読み上げソフトなどは、「ここは本文ではなく、ページを補足する情報がまとめられた場所なのだ」と理解しやすくなります。

反対に、すべてを同じようなタグで作ってしまうと、画面の見た目は同じでも、それぞれの情報がどのような役割を持っているのかを正しく判断しにくくなります。

HTML は、文字を表示するためだけの言語ではありません。
情報の意味や役割を整理して伝えるための言語です。

footerタグ のような意味を持つタグを使うことで、人にもコンピューターにも分かりやすいホームページを作れるようになります。

footerタグの基本の書き方

ここからは実際にホームページのコードをどのように書くのか、基本の形を見ていきます。

基本コード(5~6行)

まずは、最もシンプルでよく使われる footerタグ の書き方を紹介します。
実際のコードは以下のようになります。

<footer>
  <p>株式会社サンプルフード</p>
  <p>お気軽にお問い合わせください。</p>
  <p><small>© 2026 Sample Food Inc.</small></p>
</footer>

このように、全体を <footer> と </footer> で囲み、その中に会社名やメッセージ、著作権のマーク(©)などを並べて書いていきます。

ブラウザでの表示

上のコードを、インターネットの画面(ブラウザ)で表示させると、次のように見えます。

株式会社サンプルフード

お気軽にお問い合わせください。

© 2026 Sample Food Inc.

このように、footerタグ を書いただけでは、特別なデザインが自動で付くわけではありません。
画面の色や文字の大きさ、背景色などの見た目は、後から CSS という別の仕組みを使って変更します。
まずは、「フッターの情報をfooterタグで囲む」という HTML の基本を覚えることが大切です。

まずは書いてみよう

英語や記号が並んでいて「少し難しそう…」と感じた方もいるかもしれません。
ですが、最初はすべてを完璧に暗記する必要はまったくありません。
まずは、上記の5〜6行のコードをそのまま真似して、パソコンのメモ帳などに書き写してみることから始めてください。

自分でキーボードを叩いてコードを打ってみるだけで、「思ったよりもシンプルだな」「自分でも書けた!」という感覚がつかめるはずです。
この小さな積み重ねが、自分でホームページを作れるようになるための第一歩になります。

初心者によくある疑問

footerタグ の意味や書き方が分かってくると、「divタグとは何が違うの?」「headerタグとの違いは?」「必ず書かなければいけないの?」といった疑問が出てくるかもしれません。

ここでは、footerタグ について初心者がよく疑問に思うポイントを分かりやすく解説します。

divとの違いは?

「文字を囲むだけなら<div>タグでも同じではないの?」という疑問です。

結論から言うと、画面に表示される見た目は同じです。
しかし、HTML に伝わる意味は大きく異なります。

<div>タグ:特別な意味を持たない、グループ分けのためのタグ
<footer>タグ:「ここはフッターに関する情報です」という意味を持つタグ

例えば、会社情報や著作権表示を <div> タグで囲むこともできます。
しかし、それではコンピューターには「ただのまとまり」としか伝わりません。

一方、<footer> タグを使えば、「ここはフッターとしてまとめられた情報です」という役割まで伝えられます。

役割が決まっている場所では、<div> ではなく、意味を持つ <footer>タグ を使うことが HTML の基本です。

footerタグは必ず書く必要がある?

「ホームページを作るとき、footerタグ は必ず書かなければいけないの?」と疑問に思う方もいるでしょう。

答えは、必須ではありませんが、フッターにあたる情報がある場合は使うことが推奨されます。

HTML のルール上、footerタグ がなくてもホームページを表示することはできます。
しかし、著作権表示や会社情報、お問い合わせ先など、フッターとしてまとめる情報がある場合は、footerタグ を使うことで情報の役割を正しく表現できます。

また、初心者のうちは次の2つを覚えておくとよいでしょう。
・footerタグ は、必ず <body>タグ の中に書く。
・ページ全体のフッターは、一般的にはページの最後に配置する。

なお、HTML に慣れてくると、ブログ記事(<article>)やセクション(<section>)ごとに footerタグ を使う場合もあり、1つのページに複数の footerタグ が登場することもあります。

ただし、これは少し発展的な使い方です。
まずは「ページ全体のフッターを表すタグ」として、bodyタグ の中 でページの最後に書くという基本を覚えておけば十分です。

footerタグを使うとSEOに有利になる?

「footerタグ を使うと SEO に効果がある」という話を聞いたことがある方もいるかもしれません。

結論から言うと、footerタグ を使うこと自体が、直接検索順位を上げる要因になるわけではありません。

Google などの検索エンジンは、「footerタグ を使ったから順位を上げる」というような単純な評価はしていません。そのため、「SEO のためだけに footerタグ を書かなければならない」と考える必要はありません。

一方で、footerタグ にはホームページの構造や情報の役割を正しく伝えるという大切な役割があります。

例えば、footerタグ を使うことで、検索エンジンやブラウザ、画面読み上げソフトなどは、「ここは本文ではなく、著作権表示や会社情報などのフッターに関する情報がまとめられた場所なのだ」と理解しやすくなります。

このように、footerタグ は直接 SEO の順位を上げるためのタグではありません。
しかし、意味を持つタグを適切に使って分かりやすい HTML を書くことは、ホームページ全体の品質を高めることにつながります。

まずは、「SEO のために使う」のではなく、フッターであることを正しく表すために使うと考えるとよいでしょう。

タイトルとURLをコピーしました