第10回目 HTML5から追加された新要素の使い方を確認してみよう
| 前回の記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしました(第9回目 XHTML1.0とHTML5のコーディングの違いを確認してみよう)
。今回はxhtmlとHTML5のコードの違いを見ながら、HTML5で新しく追加されたタグをどのように使ったかを見てみたいと思います。なおHTML5のマークアップについてはどの要素を使うか迷う箇所もあると思います。従って、必ずしもこのマークアップが正解ということではありません。 それでは「xhtml」と「HTML5」でマークアップしたページのヘッダー、メインコンテンツ、サイドエリア、フッターと領域毎にコードの比較をしていきたいと思います。なお画像内はコードを見やすくするために、画像のwidth、height、alt属性などは省略し、ニュース原稿などは一部省略しています。 ちなみに、それぞれのマークアップしたページのサンプルこちらにあります。 ●HTML5.0でのマークアップのHTMLを見る ●XHTML1.0でのマークアップのHTMLを見る 解説：（有）ムーニーワークス 林 豊／田崎一成 |
●タグの違いを確認してみる：ヘッダエリア
【header部分のxhtmlでのコード】
 |
|
ヘッダ部分全体を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要素の特徴としては、
（※1）『コンテンツ・モデル』について / HTML5マークアップ時の基本 （※2）『アウトライン』について / HTML5マークアップ時の基本 なおheader要素の詳しい内容は下記でもまとめております。 『header要素』/ HTML5新要素一覧 |
●『hgroup要素』/ HTML5新要素
|
新しくhgroup要素が追加されました。 セクションの見出しを表し、見出し要素のh1～h6要素をグループ化します。 今回はロゴ画像のh1タグとその下のリード文をh2タグとして副題として扱い、hgroup要素で囲みました。見出しと関連する小見出しや副題をグループ化して使用するhgroup要素ですが、使用時に注意しなければならないことがあります。 hgroup要素の特徴としては、
『hgroup要素』/ HTML5新要素一覧 |
●『nav要素』/ HTML5新要素
|
新しくnav要素が追加されました。 ナビゲーションリンクを伴うセクションを表します。 nav要素は、サイトやページの主要なナビゲーションに使用しなければなりませんが、すべてのリンクグループにnav要素を使うということではありません。例えば、nav要素はサイトにとって主要なナビゲーションであるグローバルナビゲーション等に使います。ページフッター内に設置されているナビゲーション等にはnav要素を使わずにfooter要素のみで使用することもあります。このあたりはコンテンツの内容によって主要か主要ではないかなどの考え方はそれぞれなのでいろいろな使われ方があると思います。 今回はページ右上の「サイトマップ」と「RSSフィード」部分のサブナビゲーションも主要ナビと考えて、グローバルナビゲーションが隣接していたので一つのnav要素にしました。 ※ただこのままではレイアウトの際にちょっと使いにくかったので後ほど変更いたします。 nav要素の詳しい内容は下記でもまとめております。 『nav要素』/ HTML5新要素一覧 |
●タグの違いを確認してみる：メインコンテンツエリア
【contents部分のxhtmlでのコード】
 |
|
イベント情報のエリアを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要素の特徴としては、
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要素の詳しい内容は下記でもまとめております。 『time要素』/ HTML5新要素一覧 |
●タグの違いを確認してみる：サイドエリア
【sidebar部分のxhtmlでのコード】
 |
|
右サイドに載せる情報をdiv要素で囲みid属性を「sidebar」としてサイトからのお知らせをh2要素とp要素にして、バナー一覧の部分のul要素のid属性を「bnrarea」としました。 ※のちほどCSSでレイアウトを作成する際にdiv要素を追加します。 |
【sidebar部分のHTML5でのコード】
 |
| サイトからのお知らせの領域をsection要素で囲みました。 |
●『aside要素』/ HTML5新要素
|
新しくaside要素が追加されました。 メインコンテンツとは関連性が薄く、切り離すことができるコンテンツを表します。 今回はサンプルバナーを広告と仮定してこのul要素をaside要素として囲みました。aside要素は、メインコンテンツとは関連性の低い内容『補足記事・サイドバー・広告・ブログロール』などに使用しますが、メインコンテンツの中で使う場合と、外で使う場合で意味が変わってくるので注意する必要があります。 例えば、メインコンテンツの中で使う場合はメインコンテンツに何かしら関連がなくてはなりません。逆にメインコンテンツの外で使う場合はサイトや、ページ全体に関連性があることを示します。ただこちらも原稿内容によって迷ってしまう場合はあるかと思いますので今回はバナーエリアをサンプルとして設定しました。 また、aside要素はセクショニング・コンテンツの１つになりますが、見出しが無い場合でもデフォルトでSidebar等(UAによって異なる)の見出しを持っているので無理に見出しをつける必要は無いようです。 aside要素の詳しい内容は下記でもまとめております。 『aside要素』/ HTML5新要素一覧 |
●タグの違いを確認してみる：フッターエリア
【footer部分のxhtmlでのコード】
 |
| フッターに載せる情報をdiv要素で囲みid属性を「footer」としてサイトからのお問い合わせメールをaddress要素、コピーライトの部分のclass属性を「copyright」としました。 |
【footer部分のHTML5でのコード】
 |
●『footer要素』/ HTML5新要素
|
新しくfooter要素が追加されました。 セクションに対するフッターを表します。 footerはheader同様に1 つしか使ってはいけないという制約はないのでページ全体のfooter以外にも各section要素内やarticle要素内にfooterとして使うこともできます。 今回はページ全体のfooterとして使用しています。 |
●『small要素』/ HTML5新要素
|
新しくsmall要素が追加されました。 smallタグは以前はテキストを小さくするためのものでしたが、HTML5からは使われ方が変わり、注釈や細目に使われることになっています。フッター部分のコピーライトに使われる場合が多いようですので今回もコピーライト部分をsmallタグにしてみました。 |
以上が今回のマークアップででてきた新しい要素になります。
次回はHTML5でマークアップする際に意識する必要があるアウトライン(階層構造)についてxhtmlとHTML5でどのようなアウトラインになるのか比較してみたいと思います。
 |
【林 豊】●1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。 またWEB制作に役立つ情報を集めて制作のヒントになるブログを更新している HTML5でサイトをつくろう：http://www.html5-memo.com/ Webデザインクリップ：http://webdesignmatome.com/ デジハリ・オンラインスクールにて自宅や会社のPCからいつでも「HTML5」を学べる講座を担当。ただいま全体の1/3の内容を無料で視聴できます。 HTML5入門講座：http://online.dhw.co.jp/course/html5/ |
