どんなタグ？
フッターを表すタグ。
<footer>
<p><small>© 2022 CodeHero</small></p>
</footer>
<footer>タグは、直近のセクショニング・コンテンツまたはセクショニング・ルートのフッターを表します。例えば、body要素の直接の子要素にした場合、ページ全体のフッターを表し、section要素の子要素にした場合は、そのセクションのフッターを表します。
<footer>タグには、著作者に関する情報や、関連文書のリンク、著作権情報などを含めます。
- どのカテゴリに属しているの？
- フロー・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは？
-
梱包できるタグ（コンテンツ・モデル）は、フロー・コンテンツ(ただし子孫要素に別のfooter要素やheader要素を持つことはできない)です。
基本的にフロー・コンテンツというカテゴリに属しているタグは梱包可能ですが、<footer>タグ内に別の<footer>タグや<header>タグを梱包することはできません。
主にページ最下部のメニューや著作権情報などのまとまりに使用されています。
どうやって使うの？
ページ全体やセクションのフッターを、
<footer> タグで挟む。
ページ全体やセクションのフッターを、 <footer> 〜 </footer> で挟みます。
必須ではないですが、<footer>タグ内で著者の住所やSNSアカウントなどの連絡先情報を記載するときは、<address>タグを使用するのが一般的です。
また、<footer>タグをページ内で複数回使用しても問題ありません。
- 使い方
-
<footer>ページ全体やセクションのフッター</footer>
<footer>
<address>
<p>
ダミー株式会社<br>
架空市架空町6-6-6架空ビル666
</p>
</address>
<p><small>© 2022 ダミー株式会社</small></p>
</footer>https://codehero.shibajuku.net/html/footer/sample01/
- どこでも使えるの？
-
フロー・コンテンツ が配置できるところに使えます。
ただし、address要素やheader要素、別のfooter要素の子孫要素として配置してはいけません。 - 気をつけることは？
- <footer>タグは、セクショニング・コンテンツではないので、話題の範囲を表すための階層構造を形成しません。階層構造を形成する目的で使用するのはやめましょう。
階層構造を形成する場合は、<section>タグや<article>タグなどのセクショニング・コンテンツを使用しましょう。
使える属性は？
グローバル属性のみ。
どのタグにでも使えるグローバル属性のみが使えます。
class属性やtitle属性などのグローバル属性が使えます。
サンプルが見たい
<footer>タグを使ったサンプルを
いくつか紹介。
<footer> タグを使ったサンプルを紹介します。
基本的な<footer>タグのサンプル
<body>
〜メインコンテンツ省略〜
<footer>
<p>
<a href="./">
<img src="logo.png" alt="ダミー株式会社">
</a>
</p>
<ul>
<li><a href="/sitemap/">サイトマップ</a></li>
<li><a href="/privacy-policy/">プライバシーポリシー</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
<address>
<dl>
<dt>住所</dt>
<dd>ダミー市ダミー町777番地</dd>
<dt>メールアドレス</dt>
<dd>
<a href="mailto:dummy@dummy.com">dummy@dummy.com</a>
</dd>
<dt>Twitter</dt>
<dd><a href="https://twitter.com/">@dummy</a></dd>
</dl>
</address>
<p><small>© 2022 ダミー株式会社</small></p>
</footer>
</body>https://codehero.shibajuku.net/html/footer/sample02/
<article>タグ内に<footer>タグを入れた場合
<article>
<h1><code>footer</code>要素とは？</h1>
<p>
footer要素は、ページ全体やセクションのフッターを表します。通常、著作者に関する情報や、関連リンク、著作権情報などを含めます。
</p>
<footer>
<p>記事作成者：ユイト</p>
<address>
<p>
Twitter：
<a href="https://twitter.com/mikiprogram">
@mikiprogram
</a>
</p>
<p>
GitHub：
<a href="https://github.com/mikiyuito">
mikiyuito
</a>
</p>
</address>
</footer>
</article>https://codehero.shibajuku.net/html/footer/sample03/
セクションの最後に配置されることが多いですが、先頭でも問題ありません。
デフォルトスタイルは？
ブロック要素として扱うスタイルが指定。
一般的なブラウザでは、ブロック要素として扱うスタイルが指定されています。
具体的には、下記のCSSと同等のスタイルが適用されます。
footer {
display: block;
}要素の表示方法を変更する場合は、displayプロパティを使用しましょう。
対応ブラウザは？
基本的にどのブラウザでも使えます。
HTML5.0以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar 9 ~
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome 5 ~
- Firefox
- Firefox 4 ~
- Safari
- Safari 5 ~
- Opera
- Opera 11.5 ~
モダンブラウザは問題ありません。
