footer 要素

カテゴリー
フロー・コンテンツ
formatBlock 候補
この要素を使うことができるコンテキスト：
フロー・コンテンツが期待される場所
コンテンツモデル：
フロー・コンテンツ。ただし、子孫に header 要素、footer 要素を一切含まないこと。
コンテンツ属性：
グローバル属性
DOMインタフェース：
HTMLElement を使う。

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

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

セクションの著者や編集者の連絡先情報は、address 要素に属します。場合によっては、footer 要素の中に address 要素があるのかもしれません。

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

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

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

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

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <h2>The ipsum of all lorems</h2>
 </hgroup>
 <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="../">Back to index...</a></footer>
</body>

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

<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME PUBDATE DATETIME="2009-10-21T18:26-07:00"></TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <P>I love my trains. My favorite train of all time is a Köf.</P>
 <P>It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.</P>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME PUBDATE DATETIME="2009-09-15T14:54-07:00"></TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A> —
     <A HREF="/tos.html">Terms of Service</A> —
     <A HREF="/index.html">Blog Index</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

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

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

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/1">Part 2</a></p>
    <p><img src="kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-footer-element