HTML <footer>タグ：正しい理解と使い方

定義と使用方

<footer>タグは
一般的にウェブページの最下部にあるグローバルフッターを表すか、
記事やコンテンツ領域に関する作者、著作権情報、関連文書へのリンクなどの内容を表します。

フッターは通常、そのセクションを誰が作成したのか、いつ最後に更新されたのか、または関連情報をどこで確認できるのかを示す目的で使用されます。

<footer>タグは、最も近い親のセクション内容要素に対するフッター、またはそのような親が存在しない場合には<body>タグに対するフッター（「グローバルフッター」と呼ばれる）を表すために使用されます。

グローバルフッター（Global Footer）を表す場合

<footer>タグは、一般的にウェブページの最下部にある著作権情報、プライバシーポリシーへのリンクなどを含むグローバルフッター部分を表すために使用されます。

HTML要素（Element、またはタグ）の拡張的な概念として、より明確なHTML要素の構造と意味を付与する役割を持つrole属性の値はcontentinfoです。これはスクリーンリーダーを利用するユーザーのためにウェブアクセシビリティを考慮して使用されます。グローバルフッターであることを明示的に示すにはrole="contentinfo"を使用してください。

次に示すのは、<footer>タグがグローバルフッターとして使用される例です。

HTML <footer>タグを使用して、グローバルフッターであることを示しました。

<footer role="contentinfo"> <!-- 注意！ role="contentinfo"を使用 -->
    <address>
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</footer>

コード補足説明
<address>タグは連絡先情報を表します。

覚えておきましょう！
上のコードを見ると、<footer>タグにrole="contentinfo"を使用していることがわかります。ほとんどのウェブアクセシビリティ対応のスクリーンリーダーでは、<footer>タグがHTML文書の文脈上グローバルフッターかどうかを判断します。そのため、<footer>タグにrole="contentinfo"を追加しなくても問題ありません。しかし、一部のスクリーンリーダーではグローバルフッターかどうかを判断できない場合があります。ウェブアクセシビリティのためにこの問題を解決するには、<footer>タグにrole="contentinfo"を追加する必要があります。

次に示すのは、<footer>タグを使用せず、<div>タグにrole="contentinfo"を指定してグローバルフッターとして使用する例です。

HTML <footer>タグを使用せず、<div>タグにrole="contentinfo"を指定してグローバルフッターであることを示しました。

<div role="contentinfo">
    <address>
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</div>

補足説明
<div>タグは、レイアウトを作成したりコンテンツを分ける（division）コンテナとして使用するタグです。このタグ自体には特別な意味はまったくありません。

<div>タグはそれ自体には特別な意味はありませんが、<footer>タグを使用せず、role="contentinfo"を指定してグローバルフッターであることを示すことができます。

しかし、ブラウザの互換性の問題で<footer>タグを使用できない場合を除き、<div>タグよりも<footer>タグにrole="contentinfo"を使用してください。

記事やコンテンツ領域に関する作者、著作権情報、関連文書へのリンクなどの内容を含める場合

<footer>タグは記事やコンテンツ領域に関する作者、著作権情報、関連文書へのリンクなどの内容を表すために使用されます。

<footer>タグはグローバルフッターだけでなく、記事やコンテンツ領域に関する作者、著作権情報、関連文書へのリンクを含む領域を表すためにも使用されます。これによりウェブページの内容をセマンティックにし、理解しやすくします。主に次のタグの子要素として使用されます。

<article>
<aside>
<main>
<nav>
<section>

これらのタグの子要素として<footer>タグが使用される場合、グローバルフッターとは見なされません。role属性の値もcontentinfoとは見なされません。

次に示すのは、<footer>タグが記事やコンテンツ領域に関する作者、著作権情報、関連文書へのリンクなどの内容を含む場合に使用される例です。

HTML <footer>タグを使用して、記事の著作権情報を示しました。

<article>
    <h1>ウェブ開発者になるには</h1>
    <ol>
        <li>HTMLを勉強する。</li>
        <li>CSSを勉強する。</li>
        <li>PHPを勉強する。</li>
        <li>HTMLを勉強すべきだと言いましたか？ 😴</li>
    </ol>
    <footer>
        <p><small>© 2023 codingEverybody</small></p>
    </footer>
</article>

構文形式

1つのHTML文書に複数の<footer>タグを持つことができます。

しかし、<footer>タグには許可されていない子要素や許可されていない親要素があります。
これらのルールは、<footer>タグが特定の状況で使用される場合にウェブページのコンテンツを把握するのが難しくなる可能性があるため設けられており、<footer>タグを使用する際には必ず考慮する必要があります。

次の表は、<footer>タグに対して許可されていない子要素と親要素をまとめたものです。