catnose
catnose
HTMLの<footer>タグは、セクションのフッターを表すために使います。フッターには主に以下のような情報を含めます。
- 著者の情報（そのセクションを書いた人の情報）
- 関連リンク（関連記事）
- コピーライト・ライセンス情報
footerタグの使い方
直近のセクショニング・コンテンツのフッターを表す
<footer>は（自身を含む）最も近いセクショニング・コンテンツ[1]のフッターを表します。
例1 articleに対して著者を記述
<article>
<h1>京都の魅力</h1>
<p>私が思う京都の魅力は…</p>
<footer>
<p>この記事の著者：一郎さん</p>
</footer>
</article>
👆この例では、直近のセクション（1つの意味を持つまとまり）は<article>です。つまり<footer>の著者情報は<article>に対してかかっていることが分かります。
例2 sectionごとに著者を記述
<article>
<h1>京都の魅力</h1>
<section>
<p>私が思う京都の魅力は…</p>
<!-- footerはこのsectionに対するもの -->
<footer>
<p>by 一郎さん</p>
</footer>
</section>
<section>
<p>個人的な意見ですが…</p>
<!-- footerはこのsectionに対するもの -->
<footer>
<p>by 花子さん</p>
</footer>
</section>
</article>
👆この例では<footer>を含む最も近いセクションは<section>です。<footer>は<article>ではなく、<section>に対応するものというわけです（セクションごとに著者が違うということが読み取れます）。
例3 ページ全体に対するfooter
<body>
~ コンテンツ ~
<footer>
<p>Copyright © 2019 Code Kitchen</p>
</footer>
</body>
👆この例では<footer>は<article>にも<section>にも含まれていません。そのため、セクショニング・ルートである<body>に対して<footer>がかかります。つまり「このページ全体はこのCopyrightです」ということを表していることになります。
😺Webサイトの運営会社やお問い合わせ先などは、このようにfooterがbodyにかかるようにするのが望ましいでしょう。
footerは最後に配置しなくても良い
<footer>タグはセクションの最後に配置されることが多いですが、必ずしもそうする必要はありません。「著者の情報やコピーライト・ライセンス情報などを含む」というルールを満たしていれば、セクションの先頭に配置してもOKです。
😺同様にheaderタグは必ずしも最初に配置する必要はありません。
footer内の連絡先情報にはadderssタグを
<article>
<h1>京都の魅力</h1>
<p>私が思う京都の魅力は…</p>
<footer>
<p>著者：匿名太郎</p>
<address>
メール：<a href="mailto:hoge@hoge.com">hoge@hoge.com</a><br>
Twitter：<a href="https://twitter.com/~">@hoge</a>
</address>
</footer>
</article>
👆ルールではありませんが、<footer>内でメールアドレスや電話番号、ソーシャルメディアへのリンクなどを記載するときには、連絡先を含むコンテンツであることを表す<address>タグを使うのが好ましいでしょう。
🙅footer自体はセクショニングを作る要素ではない
<footer>自体はセクションを作るものではありません。文章のセクションを分ける（アウトラインを作る）ような目的で使わないようにしましょう。
🙅装飾を目的として使わない
装飾だけを目的としている場合は <header>ではなく <div>を使うようにしましょう。
<article>や<section>のように文書に章、節、項のようなまとまり（アウトライン）を作るもの。
参考：セクショニング・コンテンツ ↩︎
