足元をおろそかにすることなかれ！footer 要素についてまとめてみた。【初心者向け】

2025/04/25 Web

Web ページのフッターを構成する footer 要素についてまとめてみました。

ヘッダーと対になるフッター、Web ページを上から順番に作っていくと、ヘッダーから気合を入れて作りはじめてフッターにたどり着いた時にはすでに力尽きて……なんてことに……なりがちではございませんか？？

細かいところをきちんと作ってこそステキな Web ページになるというもの！軽視しがちな footer 要素、そもそもよく知らないなんてことも？？まずは footer 要素のことを知ることから始めましょう！

この記事でわかること

footer 要素の扱い方
footer 要素の記述例

footer 要素の役割

公式を直訳すると、
footer 要素は、直近の「セクショニングコンテンツ」または「body 要素」の“フッター”を表します。

The footer element represents a footer for its nearest ancestor sectioning content element, or for the body element.
HTML Living Standard

「セクショニングコンテンツ」の中にある footer 要素はその「セクショニングコンテンツ」の“フッター”として、

「body 要素」が footer 要素に一番近い先祖なのであれば、「body 要素」の、つまり Web ページ全体の“フッター”としてみなされるのですね。

「足（foot）」というワードから、とくに難しく考えずに足元にある情報部分のことをフッターと解釈すれば問題ないと思います。

Web ページ全体のフッターの方が、馴染み深いいわゆるフッターって感じがします。Web ページ全体のフッターのよくあるシンプルな記述例としてはこんな感じです。

<body>
 <header>
  <h1>すごい会社のホームページ</h1>
  <nav>・・・（省略）・・・</nav>
 </header>
 <main>
  <section>
   <h2>ようこそ</h2>
   <P>私たちのすごい会社のホームページにお越しくださりありがとうございます。</p>
  </section>
 </main>
 <footer>
  <p>© 2025 sugoikaisha</p>
 </footer>
</body>

“よくある”としたのは、「アウトライン」に関わることで、個人的に疑問があるためです。多くのサイトではこのような記述方法なので、問題ないと考えられます。個人的な疑問については後ほどまとめていますので興味がある方は引き続き読み進めていただけますと幸いです。

footer 要素は各セクションに入れることができる

フッターと聞いて、ページ全体の一番下のフッターを思い浮かべるかもしれません。でも footer 要素は『１ページに１つだけ』というルールはありません。これは header 要素と同じです。

article 要素や section 要素といった「セクショニングコンテンツ」の中にも footer 要素を入れることができます。その場合、そのセクションに関する著者や関連リンク、コピーライトなどの情報を含めるのが一般的です。

当然、どの「セクショニングコンテンツ」にも属していない footer 要素は、Web ページ全体のフッターとみなされます。

では、
『サイト全体のフッターは複数あっていいの？』という疑問が浮かびますよね。

これについてはとくに公式では言及されていなかったです。ただし、ユーザビリティや意味の明確さを考えると一つにするのが無難なのではないでしょうか。だって、フッターが２つあるって意味不明ですよね？！

footer 要素は「セクショニングコンテンツ」ではない

footer 要素は、「コンテンツモデル」の概念において「セクショニングコンテンツ」の要素ではありません！勘違いしやすい部分なので注意しましょう。

ちなみに「セクショニングコンテンツ」に属する要素は、article 要素、aside 要素、nav 要素、section 要素の4つのみです。

セクショニングコンテンツについて調べてみた

世界的企業サイトを参考にした
footer 要素の記述方法

こちらは項では、私なりの解釈が大部分の情報で、正確ではないかもしれないという点、ご留意ください！

さて、
現行の「HTML Living Standard（HTML のバージョンみたいなやつ！）」の解説によれば、ざっくり、下記のような説明があります。

・footer 要素は「セクショニングコンテンツ」ではない。
・“アウトライン”は、ドキュメント内の h1-h6 要素。

そして、「セクショニングコンテンツ」（と見出しが揃うこと）が“アウトライン”を形成する。ということが重要視されていたのは、旧「HTML5」の考え方。そのことを考慮して先述の記述例をもう一度見てみると、

<body>
 <header>
  <h1>すごい会社のホームページ</h1>
  <nav>・・・（省略）・・・</nav>
 </header>
 <main>
  <section>
   <h2>ようこそ</h2>
   <P>私たちのすごい会社のホームページにお越しくださりありがとうございます。</p>
  </section>
 </main>
 <footer>
  <p>© 2025 sugoikaisha</p>
 </footer>
</body>

footer 要素が、<h2>ようこそ</h2>のアウトライン上に見える気がします……。

じゃあ、
footer 要素内の情報を「セクショニングコンテンツ」で囲ってあげたらよいのでは？

<body>
 <header>
  <h1>すごい会社のホームページ</h1>
  <nav>・・・（省略）・・・</nav>
 </header>
 <main>
  <section>
   <h2>ようこそ</h2>
   <P>私たちのすごい会社のホームページにお越しくださりありがとうございます。</p>
  </section>
 </main>
 <footer>
  <section>
   <p>© 2025 sugoikaisha</p>
  </section>
 </footer>
</body>

なんだか一見、section 要素によって“アウトライン”で区切られたように見えますが、「セクショニングコンテンツ」が“アウトライン”を形成するのは「HTML5」の考え方であるという点を思い出してみると、ちょっと違うような気がしてきました。※説明のために section 内に見出しは入れてません。

じゃあ、いっそのこと、
footer 要素に見出しを入れてあげればええやん！

という考えにたどり着くわけですが、

フッターにつける見出しって何さ？そもそもフッターに見出しってつけていいの？

っていう至高の迷路に陥るわけで、参考例を探してみたのですが、なかなかそのような奇抜ななことをしているサイトはあるはずもなく……

あった！

あり申した！
世界的企業の四天王が一社！
Apple 様様！

Apple 様は、footer 要素内に<h2>Apple Footer</h2>という見出しを入れて、かつ、overflow: hidden;スタイルで人間には見えなくするという手法をとっておられました。

参考リンク

Apple

確かにこの記述なら、私が先ほど疑問に思ったことに対して、全部答えられるなぁと思います。

以上を踏まえて、改めて、
HTML Living Standard を厳格に意識した Web ページ全体のフッターの記述例の一つを提案します。

<body>
 <header>
  <h1>すごい会社のホームページ</h1>
  <nav>・・・（省略）・・・</nav>
 </header>
 <main>
  <section>
   <h2>ようこそ</h2>
   <P>私たちのすごい会社のホームページにお越しくださりありがとうございます。</p>
  </section>
 </main>
 <footer>
  <h2>sugoikaisha footer</h2>
  <p>© 2025 sugoikaisha</p>
 </footer>
</body>

見出し部分は、Apple 様に倣ってスタイルで見えなくするのもよし、もっとこだわった見出しにするのもおもしろいかもしれませんね！

本件を調べた収穫としては『フッター内に見出しは入れてもいいんだ！』ということです。なぜなら天下の Apple 様様がやっているから！（←論理的ではないけど説得力はあると思います！）

フッターに
よく入れる情報

Web ページ全体のフッターによく入れる情報は以下のようなものがあります。

コピーライト

メニュー

グローバルメニューと同じメニューを掲載してもよいですし、フッターならではのメニューを入れてもOKです。そのページやサイトに相応しいものを入れるのがベストですね。もちろん入れる必要がないのであれば入れなくても問題ありません。ユーザビリティを意識すれば自ずとどのようにすればよいかが導き出されます。

各セクションのフッター（artcle 要素や section 要素）に入れる情報はそのセクションの内容によって決めましょう。

例えば、『記事』のセクションに入れるフッターであれば、著者情報、投稿日時、関連リンク、などの情報を入れると良いかもしれませんね。

ファットフッターとは

「fat footers（ファットフッター）」というフッターの例が、公式で紹介されていました。企業とかの大規模なサイトで、情報が盛りだくさんのフッターのことを指します。

どれくらいの情報量が“fat”なのかはとくに定義されていないようですが、“たくさんの素材”が含んでいるものがファットフッターと紹介されています。例えば下記のようなものがあります。

・多数のリンク
・サイトマップ
・メール購読フォーム
・画像やロゴ
・ソーシャルメディアのアイコン
・お問い合わせ
・特別オファーなど

たくさんの情報が含まれている分厚いフッターを見かけたら、「これはファットフッターだなぁ」と思うくらいの知識として頭の片隅に入れておくとよいですね！

こういった細かな情報は、ファットフッターという選択肢のみならず、ドロップダウンメニューやハンバーガーメニューなどの様々な見せ方があります。ユーザビリティ、サイトやチームの方針によって使い分けていきましょう！

まとめ

footer 要素は、「セクショニングコンテンツ」内にある場合はそのセクションのフッターとして、「body 要素」が footer 要素に一番近い先祖なのであれば、Web ページ全体の“フッター”として扱われます。

また、勘違いしがちなこととして、footer 要素自身は「セクショニングコンテンツ」ではありません。

フッターにもたくさんの情報を入れたりします。とくに縦に長くたくさんの情報が含まれる分厚いフッターを「ファットフッター」などと呼ぶこともあります。どのようなフッターにするかは、サイトの特性やチームの方針、何よりもユーザビリティを意識しましょう！そうすればおのずと最適なフッターが導き出されるはず！足元を疎かにしない完成度の高い Web デザインを目指しましょう！

参考・出典

・HTML Living Standard. 「4.3.9 The footer element」. https://html.spec.whatwg.org/#the-footer-element, 2025年4月10日閲覧。

・MDN. 「<footer>: フッター要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/footer, 2025年4月25日閲覧。

・Apple. 「Apple」. https://www.apple.com/#ac-globalfooter, 2025年4月25日閲覧。