【HTML】コンテンツのフッターには＜footer＞要素を使おう！

1 ＜footer＞要素とは？
2 ＜footer＞要素の基本的な使い方
3 ＜footer＞要素の主な特徴
4 ＜footer＞の注意点
5 ＜footer＞を複数使った場合の基本的な使い方

＜footer＞要素とは？

＜footer＞はHTMLページで下部に表示されるフッターやを表す要素です。
通常はコピーライト、連絡先、会社名、著作権情報、サイトマップなどが含まれます。

＜footer＞要素の基本的な使い方

＜footer＞要素の基本的な使い方ソースになります。

<body>
 <!-- コンテンツ -->
 
 <footer>
  <p><small>&copy; 発行年 著作権者</small></p>
 </footer>
</body>

他、＜footer＞要素の中にはメインナビゲーション（＜nav＞要素）なども含みます。ですが必須ではありません。

<body>
 <!-- コンテンツ -->
 
 <footer>
  <nav>
   <ul>
    <li><a href="#">ページ</a></li>
    <li><a href="#">ページ</a></li>
    <li><a href="#">ページ</a></li>
   </ul>	
  </nav>
  <p><small>&copy; 発行年 著作権者</small></p>
 </footer>
</body>

＜footer＞要素の主な特徴

ページのフッターを定義する為に使用します。
1つのHTMLページ内で複数可能です。
サイトロゴ、コピーライト、ナビゲーション、著作権情報、問い合わせなどが含まれます。

＜footer＞の注意点

＜footer＞要素を使用する際に、以下の様な点に注意しましょう。

1ページ内に複数使えるが、＜header＞の中に＜footer＞、＜footer＞の中に＜footer＞など入れ子にしてはならない。
＜footer＞は＜div＞などのブロック要素として使用してはならない。フッターを定義する為のタグとして使用する。

＜footer＞を複数使った場合の基本的な使い方

1ページ内に＜footer＞要素を複数使う場合は、＜article＞や＜section＞要素を使ってマークし、そのセクションの最後に設置します。

<body>
 <header>
  ～
 </header>

 <article>
  <header>
   <h2>記事のタイトル</h2>
  </header>
  
  <section>
   <header>
    <h3>コンテンツタイトル</h3>
   </header>
   <p>記事の内容がここに入ります。</p>
   <footer>
    <p>セクションのフッター</p>
   </footer>
  </section>
  
 </article>
 
 <footer>
  <p>全体のフッター</p>
 </footer>
</body>

＜footer＞要素は複数使用できます。
私は1つしか使用しない派ですが、これはどちらも必須ではありません。