ヘッダ部分全体をdiv要素で囲みid属性を「header」として、ロゴとサブタイトル部分をdiv要素で囲みid属性を「logogroup」としました。ロゴ部分をh1要素に設定して説明文はp要素を使っています。またナビゲーション部分は右上のサイトマップとRSSフィードエリアはサブナビゲーションとしてul要素にid属性を「subnav」としました。グローバルナビゲーションも同様にul要素にid属性を「nav」としています。


【header部分のHTML5でのコード】

---

●『header要素』/ HTML5新要素

新しくheader要素が追加されました。ページや各セクションのヘッダーを表す場合に使用します。XHTML1.0やHTML4でのコーディングでは、ページのヘッダーを表す場合にdiv要素にid名を”header”と付けてコーディングしていた方も多いと思います。header要素を簡単に言ってしまえば、これに変わる要素として使用することができ、ヘッダーとしての意味をより強めることもできます。

header要素の特徴としては、

● header要素はページ内に複数使うことができます
● header要素は見出し要素を含むことを想定していますが、無い場合でも間違えではありません
● header要素はセクショニング・コンテンツ（※1）ではないため、アウトライン（※2）に現れることはありません
● header要素内にheader要素、footer要素を使うことはできません

（※1）『コンテンツ・モデル』について / HTML5マークアップ時の基本
（※2）『アウトライン』について / HTML5マークアップ時の基本

なおheader要素の詳しい内容は下記でもまとめております。

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

---

●『hgroup要素』/ HTML5新要素

新しくhgroup要素が追加されました。セクションの見出しを表し、見出し要素のh1～h6要素をグループ化します。

今回はロゴ画像のh1タグとその下のリード文をh2タグとして副題として扱い、hgroup要素で囲みました。見出しと関連する小見出しや副題をグループ化して使用するhgroup要素ですが、使用時に注意しなければならないことがあります。

hgroup要素の特徴としては、

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

なお、hgroup要素の詳しい内容は下記でもまとめております。

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

---

●『nav要素』/ HTML5新要素

新しくnav要素が追加されました。ナビゲーションリンクを伴うセクションを表します。

nav要素は、サイトやページの主要なナビゲーションに使用しなければなりませんが、すべてのリンクグループにnav要素を使うということではありません。例えば、nav要素はサイトにとって主要なナビゲーションであるグローバルナビゲーション等に使います。ページフッター内に設置されているナビゲーション等にはnav要素を使わずにfooter要素のみで使用することもあります。このあたりはコンテンツの内容によって主要か主要ではないかなどの考え方はそれぞれなのでいろいろな使われ方があると思います。

今回はページ右上の「サイトマップ」と「RSSフィード」部分のサブナビゲーションも主要ナビと考えて、グローバルナビゲーションが隣接していたので一つのnav要素にしました。
※ただこのままではレイアウトの際にちょっと使いにくかったので後ほど変更いたします。

nav要素の詳しい内容は下記でもまとめております。

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

---

イベント情報のエリアをdiv要素で囲みid属性を「event」、更新情報のエリアをdiv要素で囲みid属性を「news」として全体をdiv要素で囲みid属性を「contents」で囲みました。

それぞれイベント情報はh2要素は「#event h2」、h3要素は「#event h3」、p要素は「#event p」として、更新情報も「#news dl」、「#news dt」、「#news dd」で設定できるので特にidやclassはつけていません。
※のちほどCSSでレイアウトを作成する際にdiv要素を追加します

【contents部分のHTML5でのコード】

---

●『section要素』/ HTML5新要素

新しくsection要素が追加されました。文章の論理構造を表すための最も基本となる要素。つまり一般的なセクションを表します。今回はメインコンテンツ部分という領域、その中にイベント情報という領域、更新情報という領域がありますのでそれぞれをsectionで囲んでおります。

section要素の特徴としては、

● 章や節といった単位で扱うので、セクション内容を表すh1～h6の見出しが必ず必要になります。
● コンテナ要素ではありませんので、レイアウト目的に使用することはできません。スタイリングに都合の良い要素が必要になった場合はdiv要素が推奨されています。

HTML5ではこのsection要素をどう使うか？次にでてくるarticle要素をどう使うか？現段階ではなかなか判断が難しいのでどうしてもというときはdivタグを使ってもよいとおもいます。

section要素の詳しい内容は下記でもまとめております。

HTML5で新しく定義された新要素「section要素」の使い方の基本をまとめよう
『section要素』/ HTML5新要素一覧

---

●『article要素』/ HTML5新要素

新しくarticle要素が追加されました。それ自体で独立したコンテンツとして成り立つ自己完結したものを表します。

article要素を使用するには、その内容だけを取り出した場合に独立したコンテンツとして成り立つかを考えなければなりません。では、独立したコンテンツとは何でしょうか？　この部分の判断も難しい部分ではありますがarticle要素について調べていくと『RSSフィードで読み込んで1つの記事として成り立っているかを考える』とありますので、今回は更新情報をRSSフィードを吐き出すスペースとしてこのエリアにarticle要素を使ってみました。

article要素の詳しい内容は下記でもまとめております。

HTML5で新しく定義された新要素「article要素」の使い方の基本をまとめよう
『article要素』/ HTML5新要素一覧

---

●『time要素』/ HTML5新要素

新しくtime要素が追加されました。time要素は、正確な日時をブラウザーやロボットなどが読み取れるようにすることを想定して用意されています。また、time要素は属性値の末尾にタイムゾーン・オフセット(世界時からの時差)を追加することも可能です。

今回は更新情報の更新日の部分に使用してみました。今回サンプルでxhtmlは定義リストを使いましたが、HTML5では新要素の「article要素」「time要素」のサンプルということで更新情報をRSSフィードに使用するという想定で各ニュース項目を「article要素」で囲み、ニュース内容の更新日とタイトルを「header要素」で囲み、その下にニュース内容をp要素でマークアップしました。

なお、time要素を使用する場合に注意点がいくつか存在します。

● タイムゾーン・オフセットは日付と時刻両方の指定がされた場合にのみ付けることができます
● time要素にdatetime属性を記述しない場合は、要素内に決まったフォーマット以外の情報は表示できません
● time要素にpubdate属性を指定した場合は、article要素の中に2つ以上存在してはいけません。また、article要素の外で使用した場合も2つ以上存在してはいけません
※一時期time要素が廃止になりましたが、再度復活しておりましてこの辺は今後また変更が入る可能性があるかもしれませんので不安な場合は無理に使用しないでもよいかもしれません。

time要素の詳しい内容は下記でもまとめております。

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

---

右サイドに載せる情報をdiv要素で囲みid属性を「sidebar」としてサイトからのお知らせをh2要素とp要素にして、バナー一覧の部分のul要素のid属性を「bnrarea」としました。
※のちほどCSSでレイアウトを作成する際にdiv要素を追加します。

【sidebar部分のHTML5でのコード】

---

●『aside要素』/ HTML5新要素

新しくaside要素が追加されました。メインコンテンツとは関連性が薄く、切り離すことができるコンテンツを表します。

今回はサンプルバナーを広告と仮定してこのul要素をaside要素として囲みました。aside要素は、メインコンテンツとは関連性の低い内容『補足記事・サイドバー・広告・ブログロール』などに使用しますが、メインコンテンツの中で使う場合と、外で使う場合で意味が変わってくるので注意する必要があります。

例えば、メインコンテンツの中で使う場合はメインコンテンツに何かしら関連がなくてはなりません。逆にメインコンテンツの外で使う場合はサイトや、ページ全体に関連性があることを示します。ただこちらも原稿内容によって迷ってしまう場合はあるかと思いますので今回はバナーエリアをサンプルとして設定しました。

また、aside要素はセクショニング・コンテンツの１つになりますが、見出しが無い場合でもデフォルトでSidebar等(UAによって異なる)の見出しを持っているので無理に見出しをつける必要は無いようです。

aside要素の詳しい内容は下記でもまとめております。

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

---

フッターに載せる情報をdiv要素で囲みid属性を「footer」としてサイトからのお問い合わせメールをaddress要素、コピーライトの部分のclass属性を「copyright」としました。

---

●『footer要素』/ HTML5新要素

新しくfooter要素が追加されました。セクションに対するフッターを表します。footerはheader同様に1 つしか使ってはいけないという制約はないのでページ全体のfooter以外にも各section要素内やarticle要素内にfooterとして使うこともできます。今回はページ全体のfooterとして使用しています。

---

●『small要素』/ HTML5新要素

新しくsmall要素が追加されました。smallタグは以前はテキストを小さくするためのものでしたが、HTML5からは使われ方が変わり、注釈や細目に使われることになっています。フッター部分のコピーライトに使われる場合が多いようですので今回もコピーライト部分をsmallタグにしてみました。

---

以上が今回のマークアップででてきた新しい要素になります。

次回はHTML5でマークアップする際に意識する必要があるアウトライン(階層構造)についてxhtmlとHTML5でどのようなアウトラインになるのか比較してみたいと思います。