footer要素

ページやセクションごとのフッター情報を表す場合に使用します。著者情報（コピーライト）や関連リンク、フッターナビゲーションを記述する場所に使います。

サンプルコード

<!-- ページのフッター -->
<footer>
	<nav>
		<ul>
			<li><a href="/access">アクセス</a></li>
			<li><a href="/privacy">プライバシーポリシー</a></li>
			<li><a href="/faq">よくある質問</a></li>
			<li><a href="/contact">お問い合わせ</a></li>
		<ul>
	</nav>
	<p class="copyright">Copyrights&copy;2014 GrayCode</p>
</footer>

カテゴリー

フローコンテンツ、パルパブルコンテンツ
コンテンツモデル

フローコンテンツ
使用ケース

フローコンテンツが期待される場所（ただし、header要素、footer要素、main要素を子孫要素として持つことはできません）

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

ブログの記事ページを想定したサンプルコード

次のHTMLコードは「コーヒーの淹れ方」をテーマにした記事での使用例です。

<article>
	<header>
		<h1>コーヒーの淹れ方について</h1>
		<p><b class="lead">多くの方に親しまれているコーヒー。お仕事に、休日のひと時に、目覚めの一杯など様々な場面で飲む機会があります。<br>今回は、そんなコーヒーをより楽しむための美味しい入れ方をご紹介します。</b></p>
	</header>
	<section>
		<h2>本文が入ります</h2>
		<p>金属のフィルターで濾すフレンチプレスは、コーヒーの油分まで余すことなく抽出できるため、コーヒーの素材本来の美味しさをお楽しみいただけます。</p>
		<h3>手順1</h3>
		<p>容器に挽いた豆を入れ、そこへ半分ほど熱湯を入れます。</p>
		<h3>手順2</h3>
		<p>30秒後に、さらに熱湯を容器の9分目まで入れてください。<br>その後、3〜4分間待ちます。</p>
	</section>
	<footer>
		<p>関連リンク</p>
		<ul>
			<li><a href="#">珈琲工房</a></li>
			<li><a href="#">毎日のコーヒーをもっと美味しく！一味変わる淹れ方</a></li>
			<li><a href="#">フレンチプレスならお任せ</a></li>
		</ul>
	</footer>
</article>

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。