【MdN Design Interactive連載連載　第3回目】HTML5で新しく定義された新要素をまとめよう

今回は前回の使い方が変更になった要素の続きとして、HTML5になって新しく定義された新要素（タグ）も多くあります。その中からまずいままでのページ作成で使用している中で新しくなったタグをまとめていきます。video要素、audio要素など今までのプラグイン的な扱いの要素はいきなりでは難しいですし、ブラウザでの対応状況がまちまちで実際すぐにサイト制作に用いるということはまだあまりありませんので、まずは通常のページを作る際に使う要素をまとめてみたいと思います。

ただし、HTML5は仕様がまだ確定しておらず随時仕様変更などがありますので、現状は制作業務では無理に新要素を使わなければいけないということはありません。自分のサイトやブログなどで実験的に新要素で制作して変更があれば随時更新していくような形で勉強していく形がよいのではないかと思います。

今回はHTML5からの新要素をまとめていきますが、HTML5では「カテゴリー」「コンテンツ・モデル」「アウトライン」という概念があります。こちらをやらなくていきなり新要素でよいのか？というように思われる方もいらっしゃるとおもいますが、こちらはいきなりでは難しく感じてしまいますので、それらは要素の紹介の後にまとめる予定です。そちらを先に理解してから新要素を知りたいという方はブログの方にまとめておりますのでよかったらご覧ください。

• 『アウトライン』について｜HTML5でサイトをつくろう
• 『コンテンツ・モデル』について｜HTML5でサイトをつくろう
• HTML5のカテゴリーについて｜HTML5でサイトをつくろう

MdN Design Interactive連載記事連動ページ第3回「HTML5で新しく定義された新要素をまとめよう」はこちら

hgroup要素

セクションの見出しを表します。見出し(h1～h6要素)とそれに付随する小見出し・副題・キャッチフレーズ
となる見出し要素(h1～h6要素)をグループ化するために使用します。

見出しと関連する小見出しや副題をグループ化して使用するhgroup要素ですが、使用時に注意しなければならないポイントがあります。

• hgroup要素内には、h1～h6要素以外の要素を使用することができません。
• hgroup要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れません。

<hgroup>
    <h1>HTML5でサイトをつくろう</h1>
    <h2>ゼロからはじめるHTML5でのサイト制作</h2>
</hgroup>
<p>本連載は、HTML5をはじめてやってみようという人に、HTML5の
マークアップの基本から新要素の使い方、スマートフォンサイト作成
などサンプルを作りながら学んでいきます。</p>

「HTML5でサイトをつくろう」をタイトルにして「ゼロからはじめるHTML5でのサイト制作」を副題としてマークアップする場合に< hgroup>を使用します。見た目の部分でロゴにあたる「HTML5でサイトをつくろう」の上に副題を見せたい場合はCSSで位置を調整するか下記のようにHタグの順番を変更しても問題はありません。

いままでは見出しタグの順番はh1,h2,h3と順番通りにするようになっていましたが、HTML5では見出しの順番は順番通りでなくても問題はありません。わかりにくくなるようでしたら今までどおりやった方がよいかもしれません。

またMdN Design Interactiveのサイトのようなbodyタグ開始後すぐにサイトの説明文を入れてサイトの内容を伝えたり、SEO対策の一環として入れるというサイトがよありますが、この場合はキャッチコピーを見出しとして使う場合はhgroup要素で囲みCSSで位置を調整するか、従来のようにキャッチコピーをp要素を使用して対応する場合はhgroup要素は使いません。

過去のエントリーにも『hgroup要素』についてまとめております。
『hgroup要素』 / HTML5新要素一覧　｜HTML5でサイトをつくろう

header要素

header要素はページや各セクションのヘッダーを表す場合に使用します。いままでは<div id=”header”></div>などを使用していたと思いますが、それが<header></header>という形に置き換えることができます。

サイトのロゴ周りやブログの記事の見出しなどに使います。

HTML5　header要素の特徴

• header要素はページ内に複数使うことができます。
• header要素は見出し要素を含むことを想定していますが、無い場合でも間違えではありません。(※必須ではありません)
• header要素はセクショニング・コンテンツではないため、アウトラインに現れることはありません。(※新たなセクションを表さない)
• header要素内にheader要素、footer要素を使うことはできません。
• header要素は通常『ページ目次・サイトロゴ・検索フォーム』などを入れて使用します。

<header>
  <hgroup>
    <h1>HTML5でサイトをつくろう</h1>
    <h2>HTML5とCSS3の情報とサンプルをまとめました </h2>
  </hgroup>
  <nav>
    <ul>
      <li>HOME</li>
      <li><a href="#">SITEMAP</a></li>
    </ul>
  </nav>
</header>
<article>
  <header>
    <h1>『header要素』 / HTML5新要素一覧</h1>
    <p>Category : HTML5新要素一覧</p>
  </header>
  <section>
    <h2>header要素</h2>
    <p>セクションのヘッダーを表す場合に使用します。</p>
    ・
  </section>
</article> 

このように内容に応じて複数のheader要素を使うことができます。作例のようにサイトのヘッダー部分に使うというのと、ブログなどでTOPページに5件の記事を表示する場合の記事のタイトル部分にheaderを使うこともできます。ブログ以外では記事内のどこがヘッダー部分に該当するか迷う場合は無理に使わずページ上部のヘッダー部分のみでもよいかと思います。

過去のエントリーにも『header要素』についてまとめております。
『header要素』 / HTML5新要素一覧　｜HTML5でサイトをつくろう

footer要素

footer要素はページや各セクションのフッターを表す場合に使用します。いままでページの最下部のエリアを<div id=”footer”></div>などを使用していたと思いますが、それが<footer></footer>という形に置き換えることができます。

サイトの最下部フッターやブログの記事の下の補足事項などに使います。

HTML5　footer要素の特徴

• footer要素はページ内に複数使うことができます。
• footer要素はセクショニング・コンテンツではないため、アウトラインに現れることはありません。(※新たなセクションを表さない)
• footer要素内にheader要素、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でサイトを作ろう・・</small></p>
</footer>

作例のようにサイトの最下部のフッター部分に使うというのと、ブログなどでTOPページに5件の記事を表示する場合の最後の日付やカテゴリを表示させるエリアにfooterを使うことも可能です。ブログ以外では記事内のどこがヘッダー部分に該当するか迷う場合は無理に使わずページ下部のフッター部分のみでもよいかと思います。

過去のエントリーにも『footer要素』についてまとめております。
『footer要素』 / HTML5新要素一覧　｜HTML5でサイトをつくろう

nav要素

ナビゲーションリンクを伴うセクションを表します。

nav要素は、サイトやページの主要なナビゲーションに使用しなければなりません。すべてのリンクグループ（ナビゲーション）にnav要素を使ってはいけません。

例えば、nav要素はサイトにとって主要なナビゲーションであるグローバルナビゲーション等に使います。ページフッター内に設置されている補足的なナビゲーション等にはnav要素を使わずにfooter要素で対応しますが、この辺はサイト全体の中でのナビゲーションの内容にもよると思いますので一概には言えないかとも思います。

HTML5　nav要素の特徴

• av要素はサイト内のサイトリンク・ページ内リンクの集まりを表します。
• nav要素はサイトやページの主要なナビゲーションに使用します。(※ページフッター内に設置されているナビゲーション等にはnav要素を使わずにfooter要素で対応します。)

<nav>
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ニュース</a></li>
        <li><a href="#">商品一覧</a></li>
        <li><a href="#">会社案内</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>
  ・
  ・
  <footer>
    <ul>
        <li><a href="#">プライバシーポリシー</a></li>
        <li><a href="#">サイトマップ</a></li>
    </ul>
  </footer>

あくまで主要ナビゲーション部分をnavにするということですが主要の考え方はさまざまだとおもいますのでサイトの内容に合わせて設定するとよいでしょう。
主要ナビゲーションには