footerタグとは
HTMLのfooterタグはセクションのフッターを示します。一般的にフッターとは「文書ページの下部に表示されるもの」という意味があり、footerタグも同じ役割を持ちます。
footerには通常、以下のような情報が含まれます。
- 著者情報
- 関連リンク
- コピーライト表記
- 連絡先
- 発行日時
- 企業のロゴ
他にもサイトマップや利用規約、プライバシーポリシー、運営ポリシーなどをfooter内に設置することが多いです。
footerタグの使い方
footerタグはセクショニング・コンテンツ（sectionタグ、articleタグなど）ごとに設置できます。
ページ全体のフッター
以下の例では、footerタグをページ全体のフッターとして設置しています。
例
<html lang=”ja”>
<body>
<footer>
<ul>
<li><a href=”#”>ホーム</a></li>
<li><a href=”#”>運営者情報</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
<p><small>copyright 2022 Ride Co., Ltd. </small></p>
</footer>
</body>
</html>
このように、bodyタグの子要素として配置した場合は、ページ全体のフッターとなります。
セクションフッター
以下の例では、footerタグを直前のセクションのフッターとして設置します
<article>
<h1>記事の見出し </h1>
<p>コンテンツ</p>
<footer>
<p>執筆者名</p>
</footer>
</article>
セクショニング・コンテンツ内に設置した場合は、そのセクションのフッターとなります。この例ではarticleタグで囲まれたコンテンツのフッターを示します。
連絡先情報は、addressタグ内に配置する
著作者や執筆者の連絡先情報はfooter内に記述するかと思いますが、そういった内容はfooterタグの子要素にaddressタグを設置してそこに記述していきます。addressタグは「文書の連絡先や問い合わせ先」を示す要素です。
例
<footer>
<p>執筆者情報</p>
<address>
名前：執筆者名<br>
E-mail： writer@example.com<br>
Twitter：Twitterアカウント<br>
TEL: 03-xxxx-xxxx
</address>
</footer>
なお、addressタグ内には連絡先情報以外の情報を記述してはいけません。
footerタグの特徴
footerタグは複数回使用可能
footerタグはページ内で何回でも使用可能です。さらに同じセクション内でも複数のfooterを設置可能です。しかしfooterタグの中にfooterタグを入れる、「入れ子構造」にはできません。
footerタグは最下部でなくてもよい
フッターという名前なのでセクションの最後にfooterタグが配置されているケースがほとんどですが、セクションの最初に置いてもルール上は問題ありません。
footerタグはセクショニングを作るコンテンツではないません
footerタグはsectionタグやarticleタグのようなセクションを作るコンテンツではありません。したがって新たなアウトライン生成（セクション分け）には使えません。
まとめ
footerタグの使い方と注意点について解説しました。
footerタグにはコピーライト表記や執筆者の情報、関連リンクなどを記載するためのタグです。ただし該当する情報がなければ必ず使う必要はありません。
