footerタグ 👉 フッターを表す

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>を使うようにしましょう。


  1. <article><section>のように文書に章、節、項のようなまとまり(アウトライン)を作るもの。
    参考:セクショニング・コンテンツ ↩︎

ブラウザ対応状況

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    26〜
  • Safariのアイコン
    Safari
    6.1〜
  • Firefoxのアイコン
    Firefox
    21〜
  • Edgeのアイコン
    Edge
    12〜
  • IEのアイコン
    IE
    11で部分的に対応

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    79〜
  • iOS Safariのアイコン
    iOS Safari
    7〜

IE対応のためにはCSSにfooter { display: block; }を追加します。

caniuse.comで詳しく見る