『footer要素』 / HTML5新要素一覧

footer要素

footer要素はページや各セクションのフッターを表す場合に使用します。

footer要素の特徴

ページや各セクションのフッターを表すfooter要素の特徴を下記にまとめました。

  • footer要素はページ内に複数使うことができます。
  • footer要素はセクショニング・コンテンツではないため、アウトラインに現れることはありません。
  • footer要素内にheader要素、footer要素を使うことはできません。
  • footer要素の使用位置はページやセクションの最後でない場合も使用できます。
  • footer要素は直近の親となる「セクショニング・コンテンツ」のフッターを表します。
  • footer要素は通常『関連情報へのリンク・著者情報・著作権表記』などを入れて使用します。

footer要素のマークアップ方法

今回も、サンプルコードを使い特徴を確認していきたいと思います。

【footer要素を複数使った例】

<header>
  <h1>HTML5でサイトをつくろう</h1>
</header>
<article>
  <header>
     <h1>『footer要素』 / HTML5新要素一覧</h1>
  </header>
  <p>セクションのフッターを表す場合に使用します。</p>
  ・
  ・
  <footer>
    <p>Category : HTML5新要素一覧</p> 
  </footer>
</article>
<footer>
  <ul>
    <li>プライバシーポリシー</li>
    <li>お問い合わせ</li>
    <li>サイトマップ</li>
  </ul>
  <p><small>COPYRIGT © HTML5でサイトを作ろう AllRIGHTS RESERVED.</small></p>
</footer>

上のソースコードはこの記事ページを簡略化したものだとお考えください。

まず、最初に現れる11行目のfooter要素は記事のフッターを表しています。それはfooter要素が直近の「セクショニング・コンテンツ」のフッターを表すという特徴から、直近の親であるarticle要素のフッターと判断できるからです。また当ブログでは、記事のフッターにカテゴリーなど記事への補足情報を入れてマークアップしています。

次に15行目から22行目にあるfooter要素です。こちらはページのフッターを表しています。以前はページのフッター部分をdiv要素で囲みid名”footer”とつけて表現していたと思いますが、HTML5ではそれに変わりfooter要素でマークアップしフッターとしての意味をより強く持たせることができるようになりました。

尚、footer要素はアウトラインに現れないなどいくつかの特徴がheader要素と重なる部分がありますので、前回の記事『header要素』 / HTML5新要素一覧も参考にしてみてください。

参考サイト:

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

Amazonへ

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

Amazonへ

ブログを作成する際に参考にした本はこちらにまとめてあります。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事