★HTML Living Standard リファレンス

<footer> …… フッターを表す
Internet Explorer

<footer>タグは、フッターを表す際に使用します。

通常、footer要素には最も近い祖先セクションに関する情報が含まれています。例えば、誰がそれを書いたか、関連文書へのリンク、著作権データなどです。

セクションの筆者や編集者の連絡先は通常address要素で表しますが、そのaddress要素自体がfooter要素のなかに配置される場合もあるでしょう。 footer要素が親要素となってセクション全体が含まれる場合、そのセクションは、付録、索引、奥付、使用許諾契約などを表します。

尚、筆者名などの情報は、header要素とfooter要素のどちらに配置しても、あるいは、それら以外の要素として配置しても問題ありません。

footer要素の定義と配置

footer要素で定義されるのは、footer要素から最も近い祖先セクションのフッターです。そのような要素がない場合には、body要素のフッターとして文書全体に適用されます。

フッターはセクションの最後に配置するのが一般的ですが、必ずセクションの最後である必要はなく、セクションの上部などに配置しても問題ありません。 footer要素はコンテンツを区切るものではなく、footer要素を配置しても新しいセクションは生成されません。

header要素やfooter要素の主な目的は、スタイルシートを設定しやすくしたり、コードのメンテナンスをしやすくすることにあります。 header要素やfooter要素で、必ずヘッダーやフッターを定義しなければならないというわけではありません。

■使用例

以下のサンプルは、上部と下部に１つずつ同じ内容のフッターを配置しています。フッターは、必ずしもセクションの最後に表示する必要はありません。

HTMLソース

<body>
 <footer><a href="../">目次に戻る</a></footer>
 <hgroup>
  <h1>桃太郎</h1>
  <p>桃太郎の誕生lt;/p>
 </hgroup>
 <p>
 むかしむかしあるところに、おじいさんとおばあさんがすんでいました。
 ももがなかからぱかっとわれて、げんきなおとこのあかちゃんがうまれました。
 おじいさんは、そのあかちゃんにももたろうとなづけました。
 </p>
 <footer><a href="../">目次に戻る</a></footer>
</body>

↓↓↓

ブラウザ上の表示

桃太郎

桃太郎の誕生

むかしむかしあるところに、おじいさんとおばあさんがすんでいました。ももがなかからぱかっとわれて、げんきなおとこのあかちゃんがうまれました。おじいさんは、そのあかちゃんにももたろうとなづけました。

■使用例

以下のサンプルは、文書全体のフッターとセクションのフッターの両方にfooter要素を使用しています。

HTMLソース

<!DOCTYPE HTML>
<HTML LANG="ja"><HEAD>
<TITLE>科学者のとりとめのない話</TITLE>
<BODY>

<H1>科学者のとりとめのない話</H1>

<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 at 6:26pm</TIME></P>
 </FOOTER>
</ARTICLE>

<ARTICLE>
 <H1>私のお気に入りの列車</H1>
 <P>私は鉄道ファンです。一番好きな列車は、西ドイツ国鉄の機関車です。</P>
 <P>他の機関車と比べると小型ですが、何両もの石炭車を引っ張ります。</P>
 <FOOTER> <!-- この記事のフッター -->
  <P>公開日時： <TIME DATETIME="2009-09-15T14:54-07:00">2009/09/15 at 2:54pm</TIME></P>
 </FOOTER>
</ARTICLE>

<FOOTER> <!-- 文書全体のフッター -->
 <NAV>
  <P><A HREF="/credits.html">著作権等</A> —
     <A HREF="/tos.html">利用規約</A> —
     <A HREF="/index.html">ブログ目次</A></P>
 </NAV>
 <P>Copyright &copy; 2009 科学者</P>
</FOOTER>

</BODY>
</HTML>

↓↓↓

ブラウザ上の表示

科学者のとりとめのない話

エピソード 15

私のお気に入りの列車

私は鉄道ファンです。一番好きな列車は、西ドイツ国鉄の機関車です。

他の機関車と比べると小型ですが、何両もの石炭車を引っ張ります。

■使用例

一部のウェブサイトのデザインには、「ファットフッター」と呼ばれるものがあります。例えば、画像、他の記事へのリンク、フィードバックを送信するためのページへのリンク、特別オファーなどの多くの資料を含む”分厚い”フッターです。以下のサンプルは、そうした「ファットフッター」のあるウェブサイトのページ下部という想定です。

HTMLソース

...
 <footer>
  <nav>
   <section>
    <h1>記事</h1>
    <p><img src="images/somersaults.jpeg" alt="">
    宙返りクラスに挑戦しましょう！この二部構成の記事では、講師のジムが解説します。
    <a href="articles/somersaults/1">パート１</a> · 
    <a href="articles/somersaults/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 &copy; 2015 けんこう倶楽部 — <a href="/tos">利用規約</a></small>
  </p>
 </footer>
</body>

↓↓↓

ブラウザ上の表示

...

■関連項目

<body> …… 文書の本体（コンテンツ）を表す
<article> …… 自己完結する内容であることを表す
<section> …… 一般的なセクションを表す
<nav> …… ナビゲーションリンクのセクションを表す
<aside> …… メインコンテンツとは別のコンテンツであることを表す
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
<hgroup> …… 見出しとその関連コンテンツを表す
<header> …… 導入部分やナビゲーション補助のグループを表す
<footer> …… フッターを表す
<address> …… 連絡先情報を表す

★HTML Living Standard リファレンス

footer要素の定義と配置

■使用例

HTMLソース

ブラウザ上の表示

桃太郎

■使用例

HTMLソース

ブラウザ上の表示

科学者のとりとめのない話

エピソード 15

私のお気に入りの列車

■使用例

HTMLソース

ブラウザ上の表示

■関連項目

Sponsors