footer 要素

カテゴリー:
フロー・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
フロー・コンテント 、ただし、子孫に header, footer, main 要素がないこと。
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
contentinfo ロール (デフォルト - 指定不要) または presentation
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
HTMLElement を使う

footer 要素は、その直近の祖先にあたるセクショニング・コンテント、または、セクショニング・ルートのフッターを表します。フッターは、通常は、そのセクションに関する情報を含みます。例えば、誰が書いたのかとか、関連のドキュメントへのリンクや、著作権データや、その類です。

footer 要素がセクション全体を含む場合、それらのセクションは、別表、索引、長めの奥付、くどくどした使用許諾といったコンテンツを表します。

セクションの著者や編集者の連絡先情報は、address 要素に属しますが、それ自身を footer の中に入れることができます。headerfooter の両方にふさわしい署名欄などの情報は、どちらにも入れることができます(または、どちらにも入れない)。これらの要素の主たる目的は、単にウェブ制作者が運用管理やスタイリングできるよう分かりやすくマークアップできるようにするためでしかありません。これらは、ウェブ制作者に対して無いかしらの構造を求めるものではありません。

フッターは、通常はセクションの最後に現れますが、必ずしもそうする必要はありません。

直近の親となるセクショニング・コンテント、または、セクショニング・ルート要素が body 要素なら、それはページ全体に適用されます。

footer 要素はセクショニング・コンテントではありません。この要素は、新たなセクションを導入することはありません。

これは、2 つのフッターがあるページです。ひとつは最初に現れ、もう一つは最後に現れます。それぞれ同じコンテンツです:

<body>
 <footer><a href="../">インデックスに戻る...</a></footer>
 <div>
  <h1>Lorem ipsum</h1>
  <p>The ipsum of all lorems</p>
 </div>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer><a href="../">インデックスに戻る...</a></footer>
</body>

これは、サイト全体のフッターとセクションのフッターの両方に footer 要素が使われていることを示した例です。

<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>科学者のだらだら話</TITLE>
<BODY>
<H1>科学者のだらだら話</H1>
<MAIN>
 <ARTICLE>
 <H1>第 15 話</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">ビデオをダウンロード</A>する。</P>
 </VIDEO>
 <FOOTER> <!-- 記事のフッター -->
  <P>発行日時 <TIME DATETIME="2009-10-21T18:26-07:00">2009/10/21 午後 6:26</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>私が大好きな列車</H1>
 <P>私は自分の列車が大好きです。私がこよなく愛する列車は Köf です。</P>
 <P>石炭列車を引っ張るのを見るのが楽しいです。石炭列車と比べて、とてもちっちゃく
 見えるからなんです。</P>
 <FOOTER> <!-- 記事のフッター -->
  <P>発行日時 <TIME DATETIME="2009-09-15T14:54-07:00">2009/09/15 午後 2:54</TIME></P>
 </FOOTER>
 </ARTICLE>
</MAIN>
<FOOTER> <!-- サイト全体のフッター -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A> —
     <A HREF="/tos.html">サービス利用規約</A> —
     <A HREF="/index.html">ブログインデックス</A></P>
 </NAV>
 <P>Copyright © 2009 ゴードン・フリーマン</P>
</FOOTER>
</BODY>
</HTML>

"肥大フッター" とも呼ばれるものを入れたデザインのサイトがあります。これは、画像、別の記事へのリンク、フィードバック送信用ページへのリンク、キャンペーン情報など数多くの素材を入れたフッターのことです。中には、そのフッターの中に "入り口ページ" 全体を入れたものまであります。

このフラグメントは、"肥大フッター" を伴うサイトのページの下部を示しています:

...
 <footer>
  <nav>
   <section>
    <h1>記事</h1>
    <p><img src="images/somersaults.jpeg" alt=""> 宙返りの授業で
    ジムに行こう! 我らジム先生が 2 部構成の記事を通して、あなたを
    連れて行ってくれます。 <a href="articles/somersaults/1">パート
    1</a> · <a href="articles/somersaults/2">パート 2</a></p>
    <p><img src="images/kindplus.jpeg"> 崖っぷちで歩くのはもう
    うんざり<!-- 原文ママ -->? ゲストライターのララが、上手にヘルシースナックバーを
    食べれない様子をお見せします。 <a href="articles/kindplus/1">もっと
    読む...</a></p>
    <p><img src="images/crisps.jpeg"> 切羽詰まった。今、残されたのは
    じゃがいもひとつだけ。あなたはそれを使って何ができるのか? <a
    href="articles/crisps/1">もっと読む...</a></p>
   </section>
   <ul>
    <li> <a href="/about">私達について...</a>
    <li> <a href="/feedback">フィードバックを送る!</a>
    <li> <a href="/sitemap">サイトマップ</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">サービス利用規約</a></small></p>
 </footer>
</body>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-footer-element