HTML5は難しくない? HTML5から追加された新要素を理解しよう！【初級編：HTML5のマークアップ】
- カテゴリー HTML5でサイトをつくってみよう
前回のエントリーで簡単なレイアウト構成を作成して、xhtmlとHTML5でマークアップしてみました。前回のエントリーをご覧になっていない方はこちらからご覧になれます。
【前回のエントリー】
HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】
今回はxhtmlとHTML5のコードの違いを見ながら、HTML5から新しく追加されたタグがいくつかありますので、どのような違いがあるのかをまとめてみました。ページ内では簡単に今回の部分の説明をして過去に各要素をまとめたエントリーへのリンクをつけておりますので気になる要素がありましたら是非ご覧ください。またブログの右サイドバーに直接リンクできるようしました。
タグの違いを確認してみる：ヘッダエリア
どちらのコードも宣言文がHTML5でしたらHTML5のドキュメントですが新しく加わったタグを使って変更部分を確認してみようとおもいます。
【header部分のxhtmlでのコード】
ヘッダ部分全体をdivタグで囲みid属性を「header」として、ロゴとサブタイトル部分をdivタグで囲みid属性を「logogroup」としました。ロゴ部分をh1タグに設定して説明文はpタグを使いました。
ナビゲーション部分は右上のサイトマップとRSSフィードエリアはサブナビゲーションとしてulタグにid属性を「subnav」としました。
グローバルナビゲーションも同様にulタグにid属性を「nav」としました。
ここはulタグの上にdivタグをつけて「subnav」「nav」にしてもよいとおもいますがソースを短くしようとおもってul属性にしてみましたが皆さんはどちらでやりますでしょうか？
【header部分のHTML5でのコード】
『header要素』 / HTML5新要素
新しく<header>要素が追加されました。
ページや各セクションのヘッダーを表す場合に使用します。
XHTML1.0やHTML4でのコーディングでは、ページのヘッダーを表す場合にdiv要素にid名を”header”と付けてコーディングしていた方も多いと思います。header要素を簡単に言ってしまえば、これに変わる要素として使用することができ、ヘッダーとしての意味をより強めることもできます。
header要素の特徴としては、
- header要素はページ内に複数使うことができます。
- header要素は見出し要素を含むことを想定していますが、無い場合でも間違えではありません。
- header要素はセクショニング・コンテンツ（※1）ではないため、アウトライン（※2）に現れることはありません。
- header要素内にheader要素、footer要素を使うことはできません。
header要素のさらに詳しい内容は過去のこちらのエントリーにまとめております。
（※1）『コンテンツ・モデル』について / HTML5マークアップ時の基本
（※2）『アウトライン』について / HTML5マークアップ時の基本
『hgroup要素』 / HTML5新要素
新しく<hgroup>要素が追加されました。
セクションの見出しを表し、見出し要素のh1～h6要素をグループ化します。
今回はロゴ画像のh1タグとその下のリード文をh2タグとして副題として扱い、< hgroup>要素でグループとして囲みました。
見出しと関連する小見出しや副題をグループ化して使用するhgroup要素ですが、使用時に注意しなければならないことがあります。
hgroup要素の特徴としては、
- hgroup要素内には、h1～h6要素以外の要素を使用することができません。
- hgroup要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れません。
hgroup要素さらに詳しい内容は過去のこちらのエントリーにまとめております。
『nav要素』 / HTML5新要素
新しく<nav>要素が追加されました。
ナビゲーションリンクを伴うセクションを表します。
nav要素は、サイトやページの主要なナビゲーションに使用しなければなりません。
すべてのリンクグループにnav要素を使ってはいけません。
例えば、nav要素はサイトにとって主要なナビゲーションであるグローバルナビゲーション等に使います。ページフッター内に設置されているナビゲーション等にはnav要素を使わずにfooter要素のみで大丈夫です。
しかしコンテンツによって主要か主要ではないかの考え方はそれぞれなので色々な使われ方がするとおもいます。
今回はページ右上の「サイトマップ」と「RSSフィード」部分のサブナビゲーションも主要ナビと考えて、グローバルナビゲーションが隣接していたので一つの<nav>にしました。
※ただこのままではレイアウトの際にちょっと対応できなかったので後ほど変更いたします。
nav要素のさらに詳しい内容は過去のこちらのエントリーにまとめております。
タグの違いを確認してみる：メインコンテンツエリア
ソースを見やすくするために一部のテキストを削除しました。
【contenst部分の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タグを追加します。
【contenst部分のHTML5でのコード】
『section要素』 / HTML5新要素
新しく<section>要素が追加されました。
文章の論理構造を表すための最も基本となる要素。つまり一般的なセクションを表します。
今回はメインコンテンツ部分という領域、その中にイベント情報という領域、更新情報という領域がありますのでそれぞれをsectionで囲んでおります。
section要素の特徴としては、
- 章や節といった単位で扱うので、セクション内容を表すh1～h6の見出しが必ず必要になります。
- コンテナ要素ではありませんので、レイアウト目的に使用することはできません。
スタイリングに都合の良い要素が必要になった場合はdiv要素が推奨されています。
HTML5ではこのsection要素をどう使うか？次にでてくるarticle要素をどう使うか？現段階ではなかなか判断が難しいのでどうしてもというときはdivタグを使ってもよいとおもいます。
また全体的なアウトラインのお話を書く際にsection要素について触れますのでまずは簡単な概要まで。
section要素のさらに詳しい内容は過去のこちらのエントリーにまとめております。
『article要素』 / HTML5新要素
新しく<article>要素が追加されました。
それ自体で独立したコンテンツとして成り立つ自己完結したものを表します。
article要素を使用するには、その内容だけを取り出した場合に独立したコンテンツとして成り立つかを考えなければなりません。では、独立したコンテンツとはなんでしょうか？
この部分なかなか悩ましい部分ではありますがarticle要素について調べていくと『RSSフィードで読み込んで1つの記事として成り立っているかを考える』と書いてある記事を読み今回は更新情報をRSSフィードを吐き出すスペースとしてこのエリアにarticle要素を使ってみました。
article要素のさらに詳しい内容は過去のこちらのエントリーにまとめております。
『time要素』 / HTML5新要素
新しく<time>要素が追加されました。
グレゴリオ暦における日付や24時間表記の時刻を正確に表す為に使用します。
time要素は、正確な日時をブラウザーやロボットなどが読み取れるようにすることを想定して用意されています。また、time要素は属性値の末尾にタイムゾーン・オフセット(世界時からの時差)を追加することも可能です。
今回は更新情報の更新日の部分に使用してみました。今回サンプルでxhtmlは定義リストを使ってしまってこちらはh3とpタグだったのでxhtmlでもh3とpタグを使った方がより見やすかったなと思っております。
尚、time要素を使用する場合に注意点がいくつか存在します。
- タイムゾーン・オフセットは日付と時刻両方の指定がされた場合にのみ付けることができます。
- time要素にdatetime属性を記述しない場合は、要素内に決まったフォーマット以外の情報は表示できません。
- time要素にpubdate属性を指定した場合は、article要素の中に2つ以上存在してはいけません。また、article要素の外で使用した場合も2つ以上存在してはいけません。
time要素のさらに詳しい内容は過去のこちらのエントリーにまとめております。
タグの違いを確認してみる：サイドエリア
【sidebar部分のxhtmlでのコード】
右サイドに載せる情報をdivタグで囲みid属性を「sidebar」としてサイトからのお知らせをh2タグとpタグにして、バナー一覧の部分のulタグのid属性を「bnrarea」としました。
※のちほどCSSでレイアウトを作成する際にdivタグを追加します。
【sidebar部分のHTML5でのコード】
サイトからのお知らせの領域をsection要素で囲みました。
『aside要素』 / HTML5新要素
新しく<aside>要素が追加されました。
メインコンテンツとは関連性が薄く、切り離すことができるコンテンツを表します。
今回はサンプルバナーを広告と仮定してこのulタグをaside要素として囲みました。
side要素は、メインコンテンツとは関連性の低い『補足記事・サイドバー・広告・ブログロール』などに使用しますが、メインコンテンツの中で使う場合と、外で使う場合で意味が変わってくるので注意する必要があります。
例えば、メインコンテンツの中で使う場合はメインコンテンツに何かしら関連がなくてはなりません。逆にメインコンテンツの外で使う場合はサイトや、ページ全体に関連性があることを示します。
また、aside要素はセクショニング・コンテンツの１つになりますが、見出しが無い場合でもデフォルトでSidebar等(UAによって異なる)の見出しを持っているので無理に見出しをつける必要は無いようです。
aside要素のさらに詳しい内容は過去のこちらのエントリーにまとめております。
タグの違いを確認してみる：フッターエリア
【footer部分のxhtmlでのコード】
フッターに載せる情報をdivタグで囲みid属性を「footer」としてサイトからのお問い合わせメールをaddressタグ、コピーライトの部分のclass属性を「copyright」としました。idでなくclassにしたのは全く意味はありません。
【footer部分のHTML5でのコード】
『footer要素』 / HTML5新要素
新しく<footer>要素が追加されました。
セクションに対するフッターを表します。
footerはheader同様に1 つしか使ってはいけないという制約はないのでページ全体のfooter以外にも各section要素内やarticle要素内にfooterとして使うこともできます。
今回はページ全体のfooterとして使用しております。
こちら過去にエントリーし忘れておりましたので後ほど追加しておきます。
『small要素』 / HTML5新要素
新しく<small>要素が追加されました。
smallタグは以前はテキストを小さくするためのものだったが、HTML5からは使われ方が変わり、注釈や細目に使われることになりました。
フッター部分のコピーライトに使われる場合が多いようですので今回もコピーライト部分をsmallタグにしました。
以上が今回のマークアップででてきた新しい要素になります。
以上で第2回のタグの違いは終わりました。
次回はHTML5でマークアップする際に意識する必要があるアウトライン(階層構造)についてxhtmlとHTML5でどのようなアウトラインになるのか比較してみたいとおもいます。
【初級編：HTML5のマークアップ：全4回】
- 第1回：HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】
- 第2回：HTML5は難しくない? HTML5から追加された新要素を理解しよう！【初級編：HTML5のマークアップ】
- 第3回：HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！
- 第4回：ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】
今回の記事で参考にした本
徹底解説HTML5マークアップガイドブック
HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。
徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録
「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。
この記事を書いた人
著者 : ハヤシユタカ
2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら
ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】
HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！