私のお気に入りの列車
私は鉄道ファンです。一番好きな列車は、西ドイツ国鉄の機関車です。
他の機関車と比べると小型ですが、何両もの石炭車を引っ張ります。
<footer>タグは、フッターを表す際に使用します。
通常、footer要素には最も近い祖先セクションに関する情報が含まれています。
例えば、誰がそれを書いたか、関連文書へのリンク、著作権データなどです。
セクションの筆者や編集者の連絡先は通常address要素で表しますが、
そのaddress要素自体がfooter要素のなかに配置される場合もあるでしょう。
footer要素が親要素となってセクション全体が含まれる場合、そのセクションは、付録、索引、奥付、使用許諾契約などを表します。
尚、筆者名などの情報は、header要素とfooter要素のどちらに配置しても、
あるいは、それら以外の要素として配置しても問題ありません。
footer要素で定義されるのは、footer要素から最も近い祖先セクションのフッターです。
そのような要素がない場合には、body要素のフッターとして文書全体に適用されます。
フッターはセクションの最後に配置するのが一般的ですが、必ずセクションの最後である必要はなく、セクションの上部などに配置しても問題ありません。
footer要素はコンテンツを区切るものではなく、footer要素を配置しても新しいセクションは生成されません。
header要素やfooter要素の主な目的は、
スタイルシートを設定しやすくしたり、コードのメンテナンスをしやすくすることにあります。
header要素やfooter要素で、必ずヘッダーやフッターを定義しなければならないというわけではありません。
以下のサンプルは、上部と下部に1つずつ同じ内容のフッターを配置しています。
フッターは、必ずしもセクションの最後に表示する必要はありません。
<body>
<footer><a href="https://www.htmq.com/tech/htmls/">目次に戻る</a></footer>
<hgroup>
<h1>桃太郎</h1>
<p>桃太郎の誕生lt;/p>
</hgroup>
<p>
むかしむかしあるところに、おじいさんとおばあさんがすんでいました。
ももがなかからぱかっとわれて、げんきなおとこのあかちゃんがうまれました。
おじいさんは、そのあかちゃんにももたろうとなづけました。
</p>
<footer><a href="https://www.htmq.com/tech/htmls/">目次に戻る</a></footer>
</body>
桃太郎の誕生
むかしむかしあるところに、おじいさんとおばあさんがすんでいました。
ももがなかからぱかっとわれて、げんきなおとこのあかちゃんがうまれました。
おじいさんは、そのあかちゃんにももたろうとなづけました。
以下のサンプルは、文書全体のフッターとセクションのフッターの両方にfooter要素を使用しています。
<!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>
<A HREF="https://www.htmq.com/">ブログ目次</A></P>
</NAV>
<P>Copyright © 2009 科学者</P>
</FOOTER>
</BODY>
</HTML>
私は鉄道ファンです。一番好きな列車は、西ドイツ国鉄の機関車です。
他の機関車と比べると小型ですが、何両もの石炭車を引っ張ります。
一部のウェブサイトのデザインには、「ファットフッター」と呼ばれるものがあります。
例えば、画像、他の記事へのリンク、フィードバックを送信するためのページへのリンク、特別オファーなどの多くの資料を含む”分厚い”フッターです。
以下のサンプルは、そうした「ファットフッター」のあるウェブサイトのページ下部という想定です。
...
<footer>
<nav>
<section>
<h1>記事</h1>
宙返りクラスに挑戦しましょう!この二部構成の記事では、講師のジムが解説します。
<a href="/articles/somersaults/1">パート1</a> ·
<a href="/articles/somersaults/2">パート2</a>
</p>
歩くのにうんざりしていませんか?ゲストライターのララが、正しい歩き方を教えてくれます。
</p>
<p><img src="https://www.htmq.com/wp-content/themes/htmq/htmq-images/crisps.jpeg">ndex
おやつがなくなりました。残りもののジャガイモでポテトチップスを作りましょう!
</p>
</section>
<ul>
<li> <a href="https://www.htmq.com/tech/about">私たちについて...</a>
<li> <a href="https://www.htmq.com/tech/htmls/sitemap">サイトマップ</a>
</ul>
</nav>
<p>
</p>
</footer>
</body>
…