<footer>フッター部分を示す

<footer>タグはページ、あるいはセクション内のフッタ部分(関連リンク・コピーライトなど)をグループ化する要素です。 おもにそれにもっとも近い先祖のセクショニングコンテンツ、もしくはセクショニングルートのフッター部分を示します。

<body>
  <section>
     <footer>
     </footer>
  </section>
</body>

例えば上記のようなHTMLの場合、セクショニングルートはbody要素、セクショニングコンテンツはsection要素となります。 この場合、もっとも近い先祖のセクショニングコンテンツ、もしくはセクショニングルートはfooter要素の一つ上にあるsection要素ですので、このfooter要素は一つ上の階層にあるsection要素のフッターということになります。

また<footer>は、一般的にはページの最後またはセクション内の最後に配置される事が多いですが、配置位置に特に決まりはないので、状況に応じて先頭に配置することもできます。

footer要素内に入れる内容としては、一般的には著作情報や関連情報へのリンク、そして状況によっては作成者への連絡先情報(address要素)を含む事も可能です。 付録や索引などの長い情報をいれる場合は、セクションの内容全体がfooter要素となる事もあります。

なおfooter要素はセクションにはならないので注意して下さい。

HTML5での変更点

footer要素は、HTML5で追加された要素です。

書式

  • <footer 属性="値">~</footer> ……… フッタ部分を示す

使用した時の例

<header>
<h1>今日の天気</h1>
</header>
<p>今日は雪がやばいです!<br />
日本全土に寒波が到来しているみたいです!!</p>
<footer>
<p><time datetime="2016-01-20">2016/01/20</time></p>
</footer>

ブラウザ上の表示例

対応ブラウザなどのデータ

形式 <footer>~</footer> カテゴリ フローコンテンツ
親要素 子要素にフローコンテンツを持てるもの 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer9~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~