<footer> セクションのフッタとなるグループを表す
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ パルパブル・コンテンツ |
親にできる要素 | フロー・コンテンツを受け入れる要素。ただし、<address> 、<header> 、<footer> を除く |
子にできる要素 | フロー・コンテンツ。ただし、<header> 、<footer> を除く |
対応ブラウザ | caniuseで確認 |
<footer>タグの説明
<footer>
は、自身が所属するセクションのフッターとなるグループを表します。よく使われる場所として、ウェブページ最下部にあたる</body>
の直前や、<article>
の文末が挙げられます。
例えば、ウェブページ最下部に<div id="footer">
のような領域を作ってコピーライトを表記している場合に、これを置き換えることができます。また、メインコンテンツが置かれたセクションの最後に<footer>
を用いて、その文章の著者や連絡先などを記載することができます。
<footer>
は、ウェブページの最後に置かれるイメージがありますが、アウトラインに沿っていれば記述する場所や設置する位置に制限はありません。
<footer>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はセクショニング・コンテンツではないので、アウトラインに影響を与えません。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることは適切ではありません。
<footer>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<footer>の使い方とサンプル
以下の例は、ページの最下部にサイト全体のフッターにあたる情報を記述したものです。
HTML
<body>
<header>
<h1>サイト名</h1>
<h2>このサイトのキャッチコピー</h2>
<nav>
<ul>
<li><a href="home">ホーム</a></li>
<li><a href="blog">ブログ</a></li>
<li><a href="contents">コンテンツ</a></li>
<li><a href="sitemap">サイトマップ</a></li>
<li><a href="contact">コンタクト</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>コンテンツの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</article>
</main>
<footer>
<small>コピーライト</small>
</footer>
</body>
続いて、<article>
の中に<footer>
を用いたサンプルです。これによりメインコンテンツの構造が明確になり、意味合いが強化されます。
HTML
<article>
<header>
<h1>コンテンツの見出し</h1>
</header>
<section>
<h1>セクションの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</section>
<section>
<h1>セクションの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</section>
<footer>
<cite><a href="https://twitter.com/xxxxxx">著者</a></cite>
<time datetime="2045-10-10" pubdate>2045年10月10日</time>
</footer>
</article>
<footer>に関連するHTMLタグ
文書の構造を組み立てる要素 | |
---|---|
<article> | 自己完結した記事であることを示す |
<section> | 文書構造におけるセクションを定義する |
<aside> | 本筋から分離しても問題のない余談や補足を表す |
<nav> | ページ上の主要なナビゲーションであることを表す |
<header> | セクションの先頭となるグループを表す |
<footer> | セクションのフッターを表す |
<h1> 〜 <h6> | 文書やセクションの見出しを表す |
<p> | 文章の段落を指定する |