HTML要素辞書 by Sentaro

<footer>

フッター（Footer）要素。最も近い祖先であるセクショニングコンテンツまたはセクショニングルートのフッターを表します。

info

概要

<footer> 要素は、そのコンテンツの結びとなる情報（フッター）を提供するために使用されます。通常、著作権表示、作成者、関連文書へのナビゲーションリンク、連絡先情報（<address>要素と併用）などが含まれます。
文書全体だけでなく、<article>や<section>といったセクション内にも配置できます。

play_circle

デモ (静的表示)

HTML (Source)

Preview (Result)

list

属性 (Attributes)

属性名	説明
（グローバル属性）	`<footer>`要素には固有の属性はありませんが、すべてのHTML要素で利用可能なグローバル属性（`id`, `class`, `style`, `title`など）をサポートします。

code

実用例

1. ドキュメント全体のフッター

<body>
 ...コンテンツ...
 <footer>
  <p>© 2025 All Rights Reserved.</p>
  <address>
   連絡先: <a href="mailto:info@example.com">info@example.com</a>
  </address>
 </footer>
</body>

2. 記事内のフッター

<article>
 <h2>記事のタイトル</h2>
 <p>記事の本文...</p>
 <footer>
  <p>最終更新日: <time datetime="2025-12-14">2025年12月14日</time></p>
 </footer>
</article>

3. ナビゲーションを含むフッター

<footer>
 <nav>
  <ul>
   <li><a href="/">ホーム</a></li>
   <li><a href="/sitemap">サイトマップ</a></li>
   <li><a href="/career">採用情報</a></li>
  </ul>
 </nav>
 <p>会社の情報...</p>
</footer>

lightbulb

知っておくべき重要事項

structure

セクショニングコンテンツとの関連性
<footer>は、<body>、<article>、<section>、<nav>、<aside>など、最も近いセクショニングコンテンツの結びの情報を表します。複数の<footer>を1つのHTMLドキュメント内で使用しても問題ありません。

accessibility_new

<address>要素の利用
<footer>内に、そのフッターが関連付けられているセクションの作成者・著者の連絡先情報を入れる場合、<address>要素を利用することが推奨されます。

私について利用規約プライバシーポリシー