[2023-08-23 更新]
一般的に footer 要素はページの最後に 1 つだけ配置することが多いのではないでしょうか。しかし、必ずしもそうでなければいけないわけではありません。意外にも常識とは違うマークアップも許されており、逆にそのほうが適切な場合もあるのです。今回は、これまで疑問もなく使いこなせているようだった footer 要素の意外な性質に迫りたいと思います。
footer 要素の定義
まずは footer 要素の仕様上の定義から見ていきましょう。footer 要素は、誰もがフッターと聞いて想像するコンテンツのことです。たとえばグローバルフッターならコピーライトやサイト内リンク、記事の中のフッターなら記事の著者名や公開日時などを入れることが多いでしょう。
このように footer 要素に良く使われるコンテンツは、header 要素に入れることが多いコンテンツと重複しています。言い換えると、〇〇は header 要素に、△△は footer 要素に入れるべき、というルールはなく、どちらに入れても構いません。
footer 要素は、その配置場所によって、どのコンテンツのフッターなのかが厳密に決められています。
footer 要素は、祖先要素のうち直近のセクショニング・コンテントまたは body 要素のフッターを表すことになっています。セクショニング・コンテント とは、 article 要素、aside 要素、nav 要素、section 要素の 4 つの要素のコンテンツのことです。
簡単なマークアップ例を見てみましょう。もっとも使われる用途はグローバルフッターですね。
<body>
<header>
<img src="logo.jpg" alt="">
<h1>ウェブフロントエンド忍者</h1>
</header>
<main>
<p>Webエンジニア向け HTML, CSS, JavaScript 情報を発信します。</p>
...
</main>
<footer>
<p><small>© ウェブフロントエンド忍者</small></p>
</footer>
</body>
この footer 要素の祖先要素として body 要素が直近にありますので、この footer 要素はページのフッターということになります。
記事などを表す article 要素のフッターにも使えます。
<article>
<h1>ウェブ業界の歩き方</h1>
<p>...</p>
<footer>
<p>投稿日時: 2023/08/23 | 投稿者: Ninja</p>
</footer>
</article>
ここまでは何の違和感もないですね。
footer 要素は最初に配置しても良い？
通常、footer 要素はフッターを表すのだから、コンテンツの最後に配置するのが一般的です。しかし、仕様上、その配置場所に制限はありません。まるで header 要素であるかのように、コンテンツの最初に footer 要素を配置しても構いません。
以下のマークアップは、WHATWG HTML 仕様に書かれたサンプルを筆者がアレンジしたものです。
<article>
<h1>ウェブ業界の歩き方</h1>
<p>...</p>
<section>
<h2>コメント</h2>
<article>
<footer>投稿者:太郎 | 日時:2023/10/26</footer>
<p>...</p>
</article>
<article>
<footer>投稿者:次郎 | 日時:2023/10/27</footer>
<p>...</p>
</article>
</section>
</article>
このサンプルは article 要素でブログ記事をマークアップしています。そして、その記事の中に、2 つのコメントを article 要素でマークアップしています。このコメントのブロックの最初に footer 要素がマークアップされている点に注目してください。
もちろん、ここは header 要素でマークアップしても問題はないはずです。では、なぜ敢えて footer 要素を使ったのでしょうか。
もしかしたら、ブログシステムの事情かもしれません。はたまた、サイト運営者が header 要素を使いたくなかったのかもしれません。なぜかというと、header 要素は、もともとは見出しを入れることを意図して導入された要素だからです。もちろん、仕様上、header 要素に見出しは必須というわけではありません。しかし header 要素には見出しを入れるのが一般的ですから、見出しのないコンテンツに header 要素を使うことに違和感を感じたのかもしれません。そこで都合が良かったのが footer 要素というわけです。
では、逆に header 要素を最後に配置するのはアリでしょうか？仕様上は禁止されていません。しかし、header 要素のもともとの目的が見出しを入れることだった点、そして仕様では「前置き」や「紹介」というニュアンスのセマンティクスを持つことを考えると、コンテンツの最後に header 要素を配置するのは避けるべきではないでしょうか。
footer 要素は仕様で「フッター」と言ってしまっているので、コンテンツの最初に持ってくるというのも、header 要素の話と同様に、おかしな話なんですけどね。とはいえ、仕様のサンプルで堂々とコンテンツの最初に footer 要素を配置しているのですから、大手を振って使って良いのでしょう。
footer 要素は 2 つ配置しても良い？
以下のマークアップは、WHATWG HTML 仕様に書かれたサンプルを筆者がアレンジしたものです。
<body>
<footer><a href="../">ホームに戻る</a></footer>
<h1>iPon 14 Pro</h1>
<p>...</p>
<footer><a href="../">ホームに戻る</a></footer>
</body>
なんと、body 要素の直下に footer 要素が 2 つもマークアップされています。 実は仕様上、body 要素や article 要素が表すコンテンツに対して、footer 要素の数に制限はありません。ただし、このサンプルでは、2 つの footer 要素のコンテンツが全く同じという点に注意してください。
もし最初の footer 要素のコンテンツが「前置き」を目的としたコンテンツであり、最後の footer 要素のコンテンツと違うのであれば、最初のコンテンツは header 要素でマークアップするほうが自然でしょう。
まとめ
仕様で何でも細かくルールが定められているわけではありません。ある程度の柔軟性を持っています。しかし、その柔軟性がときに我々を悩まします。
筆者の個人の考えとしては、今回紹介したようなトリッキーな方法を積極的に取り入れる必要はなく、直感的に自然な方法を採用することを優先したほうが良いと思います。
しかし、その自然と思われるマークアップがときには違和感を作り出すことがあります。そういったときに、今回紹介したイレギュラーな使い方を知っていると、スッキリ解決できるかもしれませんね。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
