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

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

---

●hgroup要素

hgroup要素は、セクションの見出しを表します。見出し(h1～h6要素)とそれに付随する小見出し・副題・キャッチフレーズ となる見出し要素(h1～h6要素)をグループ化するために使用します。見出しと関連する小見出しや副題をグループ化して使用するhgroup要素ですが、使用時に注意しなければならないポイントがあります。

主な特徴としては、
・hgroup要素内には、h1～h6要素以外の要素を使用することができない
・hgroup要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れない
があげられます。

●見出し要素をグループ化する際に使用します

HTML4やxhtmlでは見出しタグの順番は必ずh1から順番につけていましたが、HTML5ではブロックレベル要素からアウトラインという形に変わりましたのでhタグの順番は上のように必ずしもh1が上でなくても大丈夫ですが、デザイン的にサイト名の上に副題を入れたい場合はCSSで位置指定をしてあげて見た目の順番を変えるという方法もあるかとおもいます。
※アウトラインについては後日まとめます。

●header要素

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

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

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

●footer要素

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

● footer要素はページ内に複数使うことができる
● footer要素はセクショニング・コンテンツではないため、アウトラインに現れることはない
　(※新たなセクションを表さない)
● footer要素内にheader要素、footer要素を使うことはできない
● footer要素の使用位置はページやセクションの最後でない場合も使用できる
● footer要素は通常『関連情報へのリンク・著者情報・著作権表記』などを入れて使用する

などがあります。

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

●nav要素

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

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

主な特徴として、

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

主要なナビゲーションに使用します

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

●aside要素

aside要素は、メインコンテンツとは関連性が薄く、切り離すことができるコンテンツを表します。例えばサイト以外の広告のリンクやブログパーツや外部リンク集などに使用します。ブログなどでよくある「この記事を読んだ人にはこちらをオススメ」などはその記事に対して関連性がある内容の紹介になりますが、この部分がなくても記事が成り立つものとしてはasideにするなども考えられます。

主な特徴として、

● aside要素はメインコンテンツとは関連性の低い『補足記事・広告・ブログロール』などのメインコンテンツから切り離すことができるものに使用する
● aside要素はaside要素のコンテンツがなくなった場合にもページが成り立つものに使用するようになる
● aside要素は記述位置によって意味が変わってくる
　※コンテンツ内で使用する場合は、何かしらコンテンツ内の情報と関連性があるもの、コンテンツ外で使用する場合は、何かしらサイトやページに関連性がある情報となる

などがあります。

メインコンテンツとは関連性が薄く、切り離すことができるコンテンツに使用します

作例が短いですがここでの記事はh2タグの「『aside要素』 / HTML5新要素一覧」のページとするとh3タグの「HTML5とは」はHTML5というカテゴリでは関連性は薄くはないですが、この作例では
の部分がなくても「『aside要素』 / HTML5新要素一覧」の記事は成り立つという部分でこのようにしています。この辺は原稿とページ意図によって製作者の判断になる部分かもしれません。

●figure要素

キャプション付き図表(図面・写真・ソースコードなど)を表し、自己完結しているメイン・コンテンツから参照されるようなコンテンツを表します。
こちらはページの見せ方によってさまざまな考え方が出てくると思いますので、サイト全体を考えるて使う判断が難しい場合は無理して使う必要はないと思います。ブログの方に少しサンプルを追加しております。

主な特徴として、
● figure要素は自己完結型になるので、参照用の別ページにあった場合でもコンテンツが成立する内容に使用しなければならない
● figure要素のキャプションは必須ではない
● figure要素のキャプションを表すには、figcaption要素を使用する。
　またfigcaption要素はfigure要素の最初か最後に入れなければなならない
などがあります。

図画・写真・コードリストなど、自己完結しているメイン・コンテンツから参照されるようなコンテンツを表します

今回は以上になります。

新要素の中で使い方がわかりにくい『section要素」と『article要素』についてですがこちらは次回まとめたいと思います。その後にHTML5での「カテゴリー」、「コンテンツ・モデル」、「アウトライン」についてまとめていきます。