HTMLを学習していると、Webページの下部に「footerタグ」が使われているコードを見かけることがあります。しかし、「footerタグは何のために使うの？」「divタグで囲むのと何が違うの？」「headerタグとはどう使い分ければいいの？」と疑問に感じる方も多いのではないでしょうか。footerタグは、ページやセクションの末尾にあたる情報をまとめるためのHTMLタグで、コピーライト、会社情報、ナビゲーション、関連記事リンクなどを配置する場面でよく使われます。
この記事では、HTMLのfooterタグの意味や基本的な使い方、footerタグに入れる主な要素、headerタグとの違い、SEOやアクセシビリティで意識したいポイントを初心者向けにわかりやすく解説します。サンプルコード付きで紹介するので、HTMLを学び始めたばかりの方もぜひ参考にしてください。
HTMLのfooterタグとは？
footerタグは、ページやセクションの末尾にある情報をまとめるためのタグです。Webサイト全体の下部に表示されるフッターだけでなく、articleタグやsectionタグの中で、その内容に関する補足情報をまとめる場合にも使えます。
footerタグの役割
footerタグの主な役割は、ページやコンテンツの最後に置く情報をひとまとまりにすることです。例えば、サイトのコピーライト、会社情報、利用規約へのリンク、SNSリンク、サイトマップなどをまとめる場面で使われます。
<footer>
<p>© 2026 Sample Site</p>
</footer>上記の例では、Webページの下部にコピーライトを表示しています。footerタグを使うことで、「ここはページやセクションの締めくくり部分である」とHTMLの構造上でも分かりやすくなります。
footerタグはページ下部だけでなくセクションにも使える
footerタグは、Webサイト全体の一番下だけに使うタグではありません。articleタグやsectionタグの中に入れて、その記事やセクションに関する補足情報をまとめることもできます。
<article>
<h2>お知らせ記事</h2>
<p>記事本文が入ります。</p>
<footer>
<p>投稿日：2026年6月9日</p>
</footer>
</article>このように、footerタグは「ページ全体の下部」だけでなく、「記事やセクションの末尾情報」を表す場合にも使えます。
footerタグとheaderタグの違い
footerタグと対になるように使われるタグに、headerタグがあります。headerタグはページやセクションの冒頭情報、footerタグは末尾情報をまとめるためのタグです。
<header>
<h1>サイト名</h1>
<nav>メニュー</nav>
</header>
<footer>
<p>© 2026 Sample Site</p>
<nav>利用規約・お問い合わせ</nav>
</footer>headerタグにはサイト名やナビゲーション、footerタグにはコピーライトや補足リンクを入れることが多くあります。footerタグはheadタグとは別物なので、ページ設定を書くheadタグと混同しないようにしましょう。
HTMLでfooterタグを使う方法
footerタグは、開始タグと終了タグの間に、フッターとして表示したい内容を入れて使います。基本形を覚えておけば、企業サイト、ブログ、LP、ポートフォリオサイトなど、さまざまなページで応用できます。
基本的な書き方
footerタグの基本的な書き方は、「<footer>内容</footer>」です。
<footer>
<p>© 2026 Sample Site</p>
</footer>上記の例では、footerタグの中にコピーライトを入れています。HTMLを学び始めたばかりの方は、まずこのシンプルな形を覚えておきましょう。
サイト全体のfooterを作る方法
Webサイト全体の下部にフッターを作る場合は、bodyタグの末尾付近にfooterタグを配置することが多くあります。
<body>
<header>
<h1>サイト名</h1>
</header>
<main>
<p>メインコンテンツが入ります。</p>
</main>
<footer>
<p>© 2026 Sample Site</p>
</footer>
</body>このように、ページの大きな構造としてheader、main、footerを使うと、HTMLの役割が分かりやすくなります。Webページの基本構造では、mainタグで中心となる内容を表し、footerタグで締めくくりの情報をまとめると考えるとよいでしょう。
記事やセクションのfooterを作る方法
footerタグは、articleタグやsectionタグの中でも使えます。
<article>
<h2>ブログ記事タイトル</h2>
<p>記事本文が入ります。</p>
<footer>
<p>執筆者：山田太郎</p>
<p>カテゴリー：HTML</p>
</footer>
</article>この例では、記事に関する執筆者やカテゴリー情報をfooterタグでまとめています。ページ全体のフッターと、記事内のフッターを混同しないように、どの範囲に対するfooterなのかを意識しましょう。
footerタグに入れる主な要素
footerタグには、ページやサイトの末尾に置きたい情報を入れます。何でも入れてよいわけではなく、読者がページの最後で確認したい情報や、サイト運営者に関する補足情報を整理して入れることが大切です。
コピーライトを入れる
footerタグでよく使われる要素の一つがコピーライトです。
<footer>
<p>© 2026 Sample Company. All Rights Reserved.</p>
</footer>コピーライトは、サイトの著作権表示としてフッターに配置されることが多くあります。企業サイトやメディアサイトでは、フッターにコピーライトを入れる構成が一般的です。
フッターナビゲーションを入れる
footerタグには、利用規約、プライバシーポリシー、お問い合わせ、会社概要などへのリンクをまとめることがあります。
<footer>
<nav aria-label="フッターナビゲーション">
<ul>
<li><a href="/about/">会社概要</a></li>
<li><a href="/privacy/">プライバシーポリシー</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</footer>footer内のリンクをnavタグでまとめると、ナビゲーションであることが伝わりやすくなります。同じページ内に複数のnavタグがある場合は、aria-labelを付けると役割を区別しやすくなります。
会社情報や連絡先を入れる
企業サイトでは、会社名、所在地、電話番号、メールアドレスなどをfooterタグに入れることがあります。
<footer>
<p>株式会社サンプル</p>
<address>
東京都渋谷区サンプル1-2-3<br>
<a href="mailto:info@example.com">info@example.com</a>
</address>
</footer>addressタグは、問い合わせ先や連絡先を示すときに使われることがあります。住所や連絡先を入れる場合でも、個人情報や公開してよい情報かどうかは事前に確認しましょう。
SNSリンクや関連ページを入れる
footerタグには、SNSアカウントへのリンクや、関連ページへのリンクを入れることもあります。
<footer>
<ul>
<li><a href="https://example.com/x">X</a></li>
<li><a href="https://example.com/instagram">Instagram</a></li>
</ul>
</footer>SNSリンクを入れることで、読者が別の媒体でもサイト運営者の情報を確認しやすくなります。ただし、リンクを入れすぎるとフッターが見づらくなるため、重要なリンクに絞ることが大切です。
footerタグとSEO・アクセシビリティの関係
footerタグは、直接検索順位を上げるためだけのタグではありません。しかし、ページ構造を分かりやすくしたり、重要な内部リンクを整理したりすることで、ユーザーにも検索エンジンにも伝わりやすいページ作りにつながります。
ページ構造を分かりやすくできる
footerタグを使うと、HTML上でページの末尾情報であることを示しやすくなります。divタグだけで作るよりも、役割が明確なセマンティックHTMLになります。
<div class="footer">
<p>© 2026 Sample Site</p>
</div>上記のようにdivタグでも見た目は作れますが、HTMLの意味としてはfooterタグの方が分かりやすい場合があります。
<footer>
<p>© 2026 Sample Site</p>
</footer>見た目だけでなく、タグの意味まで考えてHTMLを書くことが、読みやすく保守しやすいコードにつながります。
内部リンクを整理しやすい
footerタグには、サイト内の重要なページへのリンクをまとめることがあります。例えば、会社概要、料金ページ、よくある質問、お問い合わせなどです。
<footer>
<nav aria-label="サイト補助ナビゲーション">
<a href="/faq/">よくある質問</a>
<a href="/contact/">お問い合わせ</a>
</nav>
</footer>内部リンクを整理すると、読者が次に見たいページへ移動しやすくなります。ただし、SEO目的だけで大量のリンクを詰め込むと、読者にとって使いづらいフッターになる可能性があります。
アクセシビリティにも配慮しやすい
footerタグは、ページ構造を理解しやすくするうえで役立ちます。さらに、フッター内にnavタグを使う場合は、aria-labelを付けることで、どの種類のナビゲーションなのかを区別しやすくなります。
<nav aria-label="フッターナビゲーション">
<ul>
<li><a href="/privacy/">プライバシーポリシー</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>同じページ内に複数のナビゲーションがある場合は、aria-labelで役割を補足すると分かりやすくなります。
実務で使われるfooterタグの活用例
実際のWeb制作現場では、footerタグはサイトの締めくくりとして多くのページに使われます。企業サイト、ブログ、LP、ECサイトなど、サイトの種類によってフッターに入れる情報は変わります。
企業サイトのフッター
企業サイトでは、会社情報、所在地、問い合わせ先、採用情報、プライバシーポリシーなどをfooterタグにまとめることが多くあります。
<footer>
<p>株式会社サンプル</p>
<nav aria-label="企業情報">
<a href="/company/">会社概要</a>
<a href="/recruit/">採用情報</a>
<a href="/contact/">お問い合わせ</a>
</nav>
</footer>企業サイトのfooterは、ユーザーが最後に会社情報や問い合わせ先を確認する場所として重要です。
ブログやメディアサイトのフッター
ブログやメディアサイトでは、カテゴリー一覧、人気記事、運営者情報、SNSリンクなどを入れることがあります。
<footer>
<section>
<h2>カテゴリー</h2>
<ul>
<li><a href="/category/html/">HTML</a></li>
<li><a href="/category/css/">CSS</a></li>
</ul>
</section>
</footer>関連するカテゴリーや人気記事へのリンクを設置すると、読者が別の記事へ移動しやすくなります。ただし、すべての情報をfooterに詰め込むと、ページ下部が長くなりすぎるため注意しましょう。
LPのフッター
LP（ランディングページ）では、特定商取引法に基づく表記、プライバシーポリシー、会社情報、問い合わせ先などをfooterタグに入れることがあります。
<footer>
<nav aria-label="法的情報">
<a href="/law/">特定商取引法に基づく表記</a>
<a href="/privacy/">プライバシーポリシー</a>
</nav>
</footer>LPでは、フッターが購入や問い合わせの直前・直後に見られることもあります。必要な情報を整理して入れておくことで、ユーザーに安心感を与えやすくなります。
CSSでfooterをデザインする
footerタグはHTMLで構造を作るタグです。背景色、余白、文字色、横並びレイアウトなどの見た目はCSSで調整します。
footer {
background-color: #333;
color: #fff;
padding: 32px;
}
footer a {
color: #fff;
}HTMLでは役割を表し、CSSでは見た目を整えるという役割分担を意識しましょう。
footerタグを書く際の注意点
footerタグは便利なタグですが、使い方を間違えると読者にとって見づらいページになったり、HTML構造が分かりにくくなったりすることがあります。ここでは、初心者の方が特に注意したいポイントを整理します。
何でもfooterに入れすぎない
footerタグには、ページやセクションの末尾に必要な情報を整理して入れることが大切です。
サイトマップ、会社情報、SNSリンク、カテゴリー一覧などを入れることはありますが、すべてを詰め込みすぎると読者が目的のリンクを探しにくくなります。
SEO目的だけで大量のリンクを並べると、ユーザーにとって使いにくいフッターになる可能性があります。重要なリンクを選び、分かりやすく分類しましょう。
見出し構造を乱さない
footer内に見出しを入れる場合は、ページ全体の見出し構造を意識しましょう。
<footer>
<h2>サイト情報</h2>
<ul>
<li><a href="/about/">会社概要</a></li>
</ul>
</footer>footer内でもh2やh3などの見出しタグを使うことはありますが、ページのメインタイトルとしてh1を何度も入れるような使い方は避けましょう。footer内の見出しは、フッター内の情報を整理するために使うと考えると分かりやすいです。
footerタグを固定表示にする場合は注意する
CSSでfooterを画面下に固定表示することもできます。
footer {
position: fixed;
bottom: 0;
width: 100%;
}しかし、固定表示にすると、本文やボタンに重なって見づらくなる場合があります。特にスマートフォンでは画面が狭いため、固定フッターを使う場合は表示領域や余白を十分に確認しましょう。
headerタグやheadタグと混同しない
footerタグは、ページやセクションの末尾情報をまとめるタグです。headerタグは冒頭情報をまとめるタグで、headタグはページ設定を書くタグです。
- headタグ：titleやmetaなど、ページ設定を書く場所
- headerタグ：サイト名やメニューなど、冒頭情報をまとめる場所
- footerタグ：コピーライトや補足リンクなど、末尾情報をまとめる場所
名前が似ていても役割は異なるため、HTMLの構造を意識して使い分けましょう。
HTMLとCSSを効率良く学ぶ方法
footerタグの使い方を理解するためには、実際にHTMLとCSSを書きながら、ページの構造とデザインを確認することが大切です。footerタグはサイト制作でよく使われるため、早い段階で基本的な書き方を身につけておくと学習が進めやすくなります。
実際にコードを書きながら学習する
HTMLやCSSは、知識だけを覚えるよりも、実際にコードを書いてブラウザで確認する方が理解しやすいです。まずは、header、main、footerを使った基本構造を作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>footerタグの練習</title>
</head>
<body>
<header>
<h1>サイト名</h1>
</header>
<main>
<p>メインコンテンツが入ります。</p>
</main>
<footer>
<p>© 2026 Sample Site</p>
</footer>
</body>
</html>実際にブラウザで表示を確認すると、footerタグがページ構造のどこに入るのか理解しやすくなります。慣れてきたら、CSSで背景色や余白を調整し、見やすいフッターを作ってみましょう。
独学が不安ならプログラミングスクールもおすすめ
HTMLやCSSは比較的学びやすい言語ですが、「header、main、footerの使い分けが分からない」「CSSでフッターをうまく配置できない」「レスポンシブ対応が難しい」と悩むことも少なくありません。
独学でつまずいたまま学習が止まってしまう方も多いため、効率良く学びたい場合は質問できる環境を活用するのもおすすめです。
忍者CODEでは、HTMLやCSSの基礎からWebサイト制作まで体系的に学習できます。動画教材で学びながら実際にコードを書くアウトプット中心の学習ができるため、知識だけでなく実践的なスキルも身につけやすいのが特徴です。
HTMLやCSSをこれから本格的に学びたい方は、自分に合った学習環境を選びながらスキルアップを目指してみましょう。
＼満足度90%以上！／
オンラインプログラミングスクール忍者CODE
無料相談はこちら>
まとめ
本記事では、HTMLのfooterタグについて解説しました。
footerタグは、ページやセクションの末尾にある情報をまとめるためのHTMLタグです。コピーライト、会社情報、フッターナビゲーション、SNSリンク、関連ページなどを配置する場面でよく使われます。
footerタグは、ページ全体の下部だけでなく、articleタグやsectionタグの中でも使用できます。headerタグは冒頭情報、footerタグは末尾情報をまとめるタグであり、headタグとは役割が異なります。
footerタグを使う際は、必要な情報を整理して入れること、リンクを詰め込みすぎないこと、HTMLの構造を分かりやすく保つことが大切です。また、フッター内のナビゲーションにはnavタグやaria-labelを使うことで、アクセシビリティにも配慮しやすくなります。
HTMLやCSSの学習では、実際にコードを書きながら試してみることが理解への近道です。今回紹介したサンプルコードを参考にしながら、footerタグを使ったページ構造やフッターデザインを実際に作ってみてください。
