HTML5から追加された新要素の使い方を確認してみよう【MdN連載第10回目】

前回のエントリーで簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしました。
XHTML1.0とHTML5のコーディングの違いを確認してみよう【MdN連載第9回目】

今回はxhtmlとHTML5のコードの違いを見ながら、HTML5で新しく追加されたタグをどのように使ったかを見てみたいと思います。

HTML5のマークアップについてはどの要素を使うか迷う箇所も原稿によってはあると思いますので必ずしもこのマークアップが正解ということはありません。

xhtmlとHTML5でマークアップしたページのヘッダー、メインコンテンツ、サイドエリア、フッターと領域毎にコードの比較をしていきたいと思います。

※今回表示させるコードを見やすくするために、画像のwidth、height、alt属性などは省略し、ニュース原稿などは一部省略しています。

それぞれのマークアップしたページのサンプルこちらにあります。
HTML5.0でのマークアップのHTMLを見る
XHTML1.0でのマークアップのHTMLを見る

タグの違いを確認してみる：ヘッダエリア

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

<!-- header -->
<div id="header">

<div id="logogroup">
<h1><img src="images/header_rogo.png" /></h1>
<p>ゼロからはじめるHTML5でのサイト制作</p>
</div>

<ul id="subnav">
  <li><a href="#">サイトマップ</a></li>
  <li><a href="#">RSSフィード</a></li>
</ul>
<ul id="nav">
  <li><a href="#"><img src="images/nav_home.gif" /></a></li>
  <li><a href="#"><img src="images/nav_news.gif" /></a></li>
  <li><a href="#"><img src="images/nav_product.gif" /></a></li>
  <li><a href="#"><img src="images/nav_contact.gif" /></a></li>
  <li><a href="#"><img src="images/nav_company.gif" /></a></li>
  <li><a href="#"><img src="images/nav_access.gif" /></a></li>
</ul>
</div>
<!-- /header -->

ヘッダ部分全体をdiv要素で囲みid属性を「header」として、ロゴとサブタイトル部分をdiv要素で囲みid属性を「logogroup」としました。

ロゴ部分をh1要素に設定して説明文はp要素を使いました。

ナビゲーション部分は右上のサイトマップとRSSフィードエリアはサブナビゲーションとしてul要素にid属性を「subnav」としました。

グローバルナビゲーションも同様にul要素にid属性を「nav」としました。

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

<!-- header -->
<header>

<hgroup>
<h1><img src="images/header_rogo.png" /></h1>
<h2>ゼロからはじめるHTML5でのサイト制作</h2>
</hgroup>

<nav>
<ul id="subnav">
  <li><a href="#">サイトマップ</a></li>
  <li><a href="#">RSSフィード</a></li>
</ul>

<ul id="nav">
  <li><a href="#"><img src="images/nav_home.gif" /></a></li>
  <li><a href="#"><img src="images/nav_news.gif" /></a></li>
  <li><a href="#"><img src="images/nav_product.gif" /></a></li>
  <li><a href="#"><img src="images/nav_contact.gif" /></a></li>
  <li><a href="#"><img src="images/nav_company.gif" /></a></li>
  <li><a href="#"><img src="images/nav_access.gif" /></a></li>
</ul>
</nav>

</header>
<!-- /header -->

『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新要素一覧

タグの違いを確認してみる：メインコンテンツエリア

【contenst部分のxhtmlでのコード】

<!-- contents -->
<div id="contents">

<!-- event -->
<div id="event">
<h2>イベント情報</h2>
<h3>イベントタイトル01テキスト</h3>
<p><img src="images/image_01.gif" />テキストテキストテキストテキストテキストテキスト </p>
<h3>イベントタイトル02テキスト</h3>
<p><img src="images/image_02.gif" />テキストテキストテキストテキストテキストテキスト </p>
</div>
<!-- /event -->

<!-- news -->
<div id="news">
<h2>更新情報</h2>
<dl>
  <dt><span>[2012年01月01日] </span>　お知らせタイトル01テキスト</dt>
  <dd> テキストテキストテキストテキストテキストテキストテキスト </dd>
  <dt><span>[2012年01月01日] </span>　お知らせタイトル02テキスト</dt>
  <dd> テキストテキストテキストテキストテキストテキストテキスト </dd>
  <dt><span>[2012年01月01日]</span>　お知らせタイトル03テキスト</dt>
  <dd> テキストテキストテキストテキストテキストテキストテキスト </dd>
</dl>
</div>
<!-- /news -->

</div>
<!-- /contents -->

イベント情報のエリアを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要素を追加します。

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

<!-- contents -->
<div id="contents">

<!-- event -->
<section id="event">

<h2>イベント情報</h2>

<section class="topics">
<h3>イベントタイトル01テキスト</h3>
<p><img src="images/image_01.gif" />テキストテキストテキストテキストテキストテキスト </p>
</section>

<section class="topics">
<h3>イベントタイトル02テキスト</h3>
<p><img src="images/image_02.gif" />テキストテキストテキストテキストテキストテキスト </p>
</section>

</section>
<!-- /event -->

<!-- news -->
<section id="news">
<h2>更新情報</h2>
<article>
<header>
<time datetime="2011-09-01">2011年09月01日</time>
<h3>お知らせタイトル01</h3>
</header>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>

<article>
<header>
<time datetime="2011-09-01">2011年09月01日</time>
<h3>お知らせタイトル02</h3>
</header>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>

<article>
<header>
<time datetime="2011-09-01">2011年09月01日</time>
<h3>お知らせタイトル03</h3>
</header>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>
</section>
<!-- /news -->

</div>
<!-- /contents -->

『section要素』 / HTML5新要素

新しくsection要素が追加されました。

文章の論理構造を表すための最も基本となる要素。つまり一般的なセクションを表します。

今回はメインコンテンツ部分という領域、その中にイベント情報という領域、更新情報という領域がありますのでそれぞれをsectionで囲んでおります。

section要素の特徴としては、

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

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

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

HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました【MdN連載第4回目】

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

『article要素』 / HTML5新要素

新しくarticle要素が追加されました。

それ自体で独立したコンテンツとして成り立つ自己完結したものを表します。

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

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新要素一覧

タグの違いを確認してみる：サイドエリア

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

<!-- sidebar -->
<div id="sidebar">
<h2>サイトからのお知らせ</h2>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
<ul id="bnrarea">
  <li><img src="images/bnr_01.gif" /></li>
  <li><img src="images/bnr_02.gif" /></li>
  <li><img src="images/bnr_03.gif" /></li>
</ul>
</div>
<!-- /sidebar -->

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

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

<!-- sidebar -->
<div id="sidebar">

<section>
<h2>サイトからのお知らせ</h2>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</section>

<aside>
<ul id="bnrarea">
  <li><img src="images/bnr_01.gif" /></li>
  <li><img src="images/bnr_02.gif" /></li>
  <li><img src="images/bnr_03.gif" /></li>
</ul>
</aside>

</div>
<!-- /sidebar -->

新しくaside要素が追加されました。

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

今回はサンプルバナーを広告と仮定してこのul要素をaside要素として囲みました。

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

例えば、メインコンテンツの中で使う場合はメインコンテンツに何かしら関連がなくてはなりません。逆にメインコンテンツの外で使う場合はサイトや、ページ全体に関連性があることを示します。

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

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

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

タグの違いを確認してみる：フッターエリア

【footer部分のxhtmlでのコード】

<!-- footer -->
<div id="footer">
<address>サイトへのお問い合わせ：<a href="mailto:info@example.com">info@example.com</a></address>
<p class="copyright">COPYRIGHT &copy; HTML5でサイトを作ろう AllRIGHTS RESERVED.</p>
</div>
<!-- /footer -->

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

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

<!-- footer -->
<footer>
<address>サイトへのお問い合わせ：<a href="mailto:info@example.com">info@example.com</a></address>
<p class="copyright"><small>COPYRIGHT &copy; HTML5でサイトを作ろう AllRIGHTS RESERVED.</small></p>
</footer>
<!-- /footer -->

『small要素』 / HTML5新要素

新しくsmall要素が追加されました。

smallタグは以前はテキストを小さくするためのものだったが、HTML5からは使われ方が変わり、注釈や細目に使われることになりました。

フッター部分のコピーライトに使われる場合が多いようですので今回もコピーライト部分をsmallタグにしました。

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

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

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

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

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

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

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

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