footerタグ -ページやセクションのフッターを示す｜HTML辞典
<footer>タグとは？
<footer>タグは、HTML文書内でページやセクションのフッターを示すためのタグです。
主に著作権情報、著者情報、関連リンク、連絡先などを配置するのに適しています。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<footer> は開始タグ（ <footer> ）と閉じタグ（ </footer> ）の両方が必要です。
基本的な記述方法
<footer>
<p>© 2025 MyWebsite. 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>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <footer class="site-footer">...</footer> |
id | 一意の識別子を設定 | <footer id="main-footer">...</footer> |
style | インラインスタイルを適用 | <footer style="background-color: black;">...</footer> |
CSSを使ったデザイン変更
footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}適切な使用例
✅ Webサイト全体のフッターとして使用
<footer>
<p>© 2025 MyCompany. All rights reserved.</p>
<nav>
<ul>
<li><a href="/privacy-policy">プライバシーポリシー</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</footer>✅ 記事ごとのフッターに使用<article>タグ内で著者情報や公開日を示す場合にも適しています。
<article>
<h2>最新の技術ニュース</h2>
<p>この記事では最新の技術動向について解説します。</p>
<footer>
<p>執筆者: 田中 太郎 | 公開日: 2025年1月1日</p>
</footer>
</article>適切でない使用例（誤った使い方）
❌ 単なるスタイリング目的で使用するのはNG
<footer>はフッターを示すためのセマンティックなタグであり、単なるデザイン要素として使うのは適切ではありません。
<!-- NG: 単なるボックスとして使用 -->
<footer class="box"> これは単なるボックスです。 </footer>✅ 正しい書き方（<div> を使用）
<div class="box">
これは単なるボックスです。
</div>footerタグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<footer> | ページやセクションのフッター | 意味を持つブロック | Webサイトのフッター、記事の著者情報 |
<div> | 汎用的なグループ化 | 意味を持たない | レイアウトやスタイル適用 |
<nav> | ナビゲーションの定義 | リンクのまとまり | フッター内のメニュー |
使用上の注意点
✅ ページ全体のフッターとセクションのフッターを使い分ける
ページ全体の最下部に配置するフッターと、各記事・セクションのフッターは異なる用途で使用できます。
✅ 主要な情報を配置する
<footer> 内には、著作権情報、連絡先、プライバシーポリシーなど、ページの補足情報 を配置するのが一般的です。
関連タグ
まとめ
<footer>タグは、HTML文書内でページやセクションのフッター部分を定義するためのタグです。
著作権情報やリンク、著者情報を配置するのに適しており、単なるデザイン目的ではなく、意味のあるコンテンツの整理に使用することが推奨されます。
