必要条件

この記事に必要な予備知識

Familiarity with building web pages using HTML and CSS.

ユーザーレベル

すべて

私と同じ仕事をなさっている方なら、ここ最近、HTML5がどうしたこうしたという話を、あちこちでお聞きになっているに違いありません。「Flashキラー」のビデオ要素とか、キャンバスによるアニメーションとか、位置情報とかいった話です。実際には、HTML5に関わるこのような騒ぎは誇張されていて、HTML5とは無関係なものまでが含まれています。Web上では、CSS3の表現力豊かな新しい機能のことが、「HTML5」という呼び名を付けて語られています。HTML5に関するマーケティングの大騒ぎの中で忘れられがちなのが、新しく導入される要素やその他のセマンティクスに関する変更です。この記事では、これらのセマンティック要素について理解し、正しく使用するために必要なことを解説します。これらの要素は見かけは地味ですが、とても重要なものです。このテーマは無味乾燥に見えるかもしれませんが、これらの新しい要素を正しく使用すれば、マークアップに新しい豊かさを加えられるのです。

セクションで考える

新しい要素はそもそも何のためのものでしょうか。必要なものなのでしょうか。どこからきたのでしょうか。

コードについて考えてみましょう。<div id="nav"><div class="header"><div id="footer">などを使ったことはありますか?これが新しい要素の基になったものです。何百万(もしかしたら何十億)ものWebページの自動収集の結果から、共通のクラス名が抽出されました。想像してみてください。"div class=header"というのを数え切れないほど目にしたとしたら、アナリストとしてはそこに何かがあると気づくのではないでしょうか。

実際に、上に示したIDは、最もわかりやすい3つの要素、すなわちheadernavfooterに対応しています。その意味はほとんどの人にとって明らかでしょう。もう少しわかりにくいものとしてarticlesectionがあり、asideに至ってはほとんど意味不明です。さらに重要なこととして、これらはページのどこに表示されるのでしょうか。この記事ではこれらすべてについては説明しませんが、HTML5で導入された新しい要素の例として、次のものが挙げられます(ただし、今後も仕様に追加されたり省かれたりするものが多少はあるかもしれません)。

article

aside

audio

canvas

command

datalist

details

embed

figcaption

figure

footer

header

hgroup

keygen

mark

meter

nav

output

progress

rp

rt

ruby

section

source

summary

time

video

wbr

Webサイトのコンテンツを受け取ったときにまず直面する問題は、新しい要素のどれを使用するのが適切なのか、それらをどこに置けばよいのかを判断することです(図1を参照)。

ほとんどのページでは、上部にヘッダー、下部にフッターがあり、ヘッダーの下(または内部)、あるいはサイド列にナビゲーションが存在する場合もあります。しかし、このような考え方は完全にHTML4/XHTML時代のものです。言い換えれば、新しい要素自体に加えて、HTML5ワーキンググループでは、ページのコンテンツをそのコンテンツの内容に基づいてマークアップすることを意図しています。コンテンツがページ上の「どこに」置かれるかを考えるのではなく、そのコンテンツがページの他のコンテンツに対してどのような関係を持つかを考えるべきなのです。もっと詳しく言えば、ページやセクションの中でのそのコンテンツの役割は何かということです。

これらの要素は、相互にネストさせることもできます。つまり、headerがnavの中にあったり、footerがarticleの中にあったりしてもかまいません。しかしここでは、読者の頭を混乱させないように、まず要素自体について説明することにします。新しい要素の中で、セクショニング要素と呼ばれているものが4つあります。これらは、現在使用されているdiv要素(div要素は今後も引き続き使用されます)にはめ込む新しいブロックのようなものです。その4つの要素とは、articleasidenavsectionです。

アウトライン

セクショニング要素は、ページのアウトラインを作成するものです。HTML4/XHTMLでは、アウトラインはマークアップの見出しのレベルによって暗黙に作成されていました。divはページのアウトラインには無関係でした。その結果は、期末レポートや研究論文のアウトラインのようなものでした。Wikipediaはすべての記事にアウトラインを表示しており、それはまさに見出しのレベルに基づいています(図2を参照)。各記事はH1で始まり、トップレベルのH2見出しに進み、その中にH3、H4などがネストされています。これによる暗黙のアウトラインは、ナビゲーションとしてページ内に配置されています。見出しの適切な使用は、福祉機器を使用しているユーザーにとっては有益です。見出しのリストを要求して、ページ上の論理的な位置に移動することができるからです。

HTML5では、アウトラインは明示的に作成されます。見出しの代わりにセクショニング要素を使用して、ドキュメントのセクションを作成します。これらの要素は、どの見出しレベルで始まるかに関わらず、ドキュメントの目次を適切に作成する効果があります。セクショニング要素はH1で始まってもかまいませんが、セクションがどの見出しレベルで始まっていても、階層はそこから下に降りていきます。

すべてのセクショニング要素をH1で始めても全くかまいません。これにより論理的な構成が可能となるので、CMSからコードの一部を取り出して、その正しいセマンティック構造を維持しながら、サイトの他の場所で使用することができます。ただし現時点では、福祉機器のサポートがまだ追いついていないので、適切なランクの要素をセクションのネスティングレベルとして使用した方がよいかもしれません。すなわち、セクショニング要素を使用してアウトラインを作成する一方で、これらのセクションを開始するには、暫定的にH1、H2、H3の階層を引き続き使用するということです。コンテンツのある部分がアウトラインの新しい項目を開始するのでない場合は、divを使用するのがおそらく適切でしょう。

セクショニング要素

<section>

4つの新しいセクショニング要素のうち最も一般的なものが、section要素です。sectionは、ドキュメントまたはアプリケーションの一般的なセクションを表します。HTML5ドキュメントには次のように記されています。

「このコンテキストでのセクションとは、テーマに基づいてコンテンツをグループ化したもので、通常は見出しを伴う。

セクションの例としては、章、タブ付きダイアログボックスの各タブページ、論文の番号付きの節などが挙げられる。例えば、Webサイトのホームページは、導入、ニュース項目、連絡先情報の各セクションに分割される場合がある。」

なお、単にスタイル設定の目的で、あるいはスクリプトの記述のための便宜として要素を使用する場合は、引き続きdivを使用すべきです。section要素にはそこまでの一般性はありません。この要素の役割は、ページのアウトラインの新しいセクションを作成するページの部分を定義することです。

上で述べられているように、サイトのホームページには、サイト内の様々なコンテンツの部分にユーザーを誘導する目的で、いくつかのsection要素が配置されているのが普通です。情報ページも、内部にいくつかのsectionを含む場合があります。コードは例えば次のようにマークアップされます。

<article> <hgroup> <h1>British Virgin Islands</h1> <h2>A bareboat charter wonderland!</h2> </hgroup> <p>Want to go sailing on your vacation? Among these Caribbean jewels, there are options for both beginners and experienced charterers…</p> <section> <h1>Virgin Gorda</h1> <p>The Baths at Virgin Gorda are truly one of the most picturesque places in the Caribbean.<p> </section> <section> <h1>Norman Island</h1> <p>Whether it's snorkeling at the Indians or drinks and night life at Willy T's floating restaurant, the Bight on Norman Island gives you a full range of choices…</p> </section> <section> <h1>Jost Van Dyke</h1> <p>This small island contains several great evening activities including the Soggy Dollar Bar and Sidney's Restaurant…</p> </section> </article>

<article>

article要素の使用法については、Web上で多くの議論が行われてきました。当初、仕様はややあいまいで混乱を招くと感じる人もいました。その後説明が改善されて、現在の定義は次のようになっています。

「article要素は、ドキュメント、ページ、アプリケーション、またはサイト内の自己完結した内容を表す。これは原則として、独立に配信または再使用可能なものである。例としては、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリー、ユーザーが送信したコメント、インタラクティブなウィジェットやガジェット、その他コンテンツ内の独立した項目が挙げられる。」

混乱の1つの原因は、article(記事)という語自体が説明に用いられていることにあるかもしれません。この語は通常、雑誌、新聞、ブログなどに掲載される文章を指すからです。しかし、「配信」という言葉に惑わされてはいけません。これは、articleが実際に配信されるブログの投稿や新聞記事だけに使用されるという意味ではありません。その意味は、articleのコンテンツは必要な場合独立して使用することができ、その場合でもそれが何でどこから来たかを理解するための情報が揃っているということです。

辞書を引いてみれば、articleの定義の1つとして、「ある分類に属する個々の物、構成要素、または部分。項目、品目:an article of food(食料品の品目)、articles of clothing(衣料品の品目)」という記述があります。すなわち、出版業界で使用される「記事」という意味から離れて、もっと単純な「個々の物」、「品目」といった意味で考えた方が、article要素を理解する上で助けになるかもしれません。

そこで、ブログの投稿を例にしてみたいと思います。さっき言ったことと矛盾すると思われるかもしれませんが、articleは、若干の例外と、そしてもちろん、ブログの投稿への使用にも適しています。仕様には、「ユーザーが送信したコメント」もarticleであると記されています。コメントをこの方法でマークアップすることに関しては、多くの議論がありました。しかし、articleとしてマークアップされるコメントは、元のarticleにネストされるのが普通です。コメントの対象となるarticleの終了タグの後に配置されるわけではありません。すなわち、セマンティクス的には、それを含む元の項目に関連する項目と見なされるわけです。その前提で言えば、コメントは通常自己完結しています。投稿者の識別情報(名前やアバター)があり、時刻と日付があり、コメント本文があります。それだけ切り離しても、誰がいつ書いたかを判定できます。

<article> <header> <h1>Anchoring isn't for beginners</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If you've ever chartered a 45ft catamaran, you know that mooring balls are your friends. They protect the coral and sea bottom from the constant abuse of frequently anchoring boats.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: Peg Leg Patooty</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Right! Mooring balls are for wusses! Pirates only use anchors! Arrrrr!</p> </article> <article> <footer> <p>Posted by: Ariel</p> <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p> </footer> <p>Thank you for thinking of what's under the sea. Even Ursula would be thrilled.</p> </article> </section> </article>

ブログの投稿(親article)とコメント(子article)は、どちらも新しいtime要素によってマークアップされます。仕様には次のように記されています。

「この要素の目的は、最近の日付と時刻をマシン読み取り可能な形式でエンコードすることによって、例えば、ユーザーエージェントが誕生日の通知やイベントのスケジュールをユーザーのカレンダーに追加できるようにすることである。」

マシン読み取り可能という語に注目してください。マシンがデータを解釈して、データを自分のプログラムで自動的に使用したり、様々な用途のための複合データを作成したりできるようにデータをマークアップすることは、ますます有用性を増しています。これは、セマンティクスが重要である理由の1つです。マシン(検索エンジンを含む)がデータの意味を理解できれば、データの有用性と機能性は大幅に高まります。

また、time要素にpubdateというブール属性があることに気づかれた方もおられるかもしれません。仕様には、この属性は「要素が示す日付と時刻が、最も近い祖先のarticle要素、または要素に祖先のarticle要素がない場合はドキュメント全体の、公開日付と時刻に対応することを示す」と記されています。

簡単に言うと、この属性は、time要素がコメントまたは記事の実際の公開日を表すことを、データを解析するマシンに知らせる役割を果たします。ページ全体のフッターのtime要素にpubdateを使用した場合、Webページ自体の公開日付と時刻であることを表します。

次に、残りの2つのセクショニング要素に進みましょう。

<nav>

3番目のセクショニング要素は、サイトとそのページのナビゲーションに関連します。

「nav要素は、他のページまたはページ内の部分にリンクするページのセクションを表す。すなわち、ナビゲーションリンクを持つセクションである…この要素の主な目的は、主要ナビゲーションブロックから構成されるセクションを作成することである。」

現在のWebマークアップでは、サイトの主な場所へのリンクのグループ(場合によってはドロップダウンで選択)、サイトの特定のセクション内のリンクのグループ、およびページが複数の部分に分割される場合はページ内移動のためのリンクのグループが含まれるのが一般的です。また、推奨する他のサイトへのリンクのグループ(ブログロール)、特定の主題に関するリソースリンクのグループ、さらにページのフッターでのトップレベルリンクの繰り返し(ユーザーが次の移動先を選ぶのに先頭までスクロールして戻る必要がないように)が存在する場合もあります。

1つ目のセットは、「主要ナビゲーション」グループと見なすことができます。これらは、サイトまたはサイトのセクションのナビゲーションのためにユーザーが必要とするリンクのグループです。これらのグループは、福祉機器を使用しているユーザーが、目的のコンテンツに直接到達したり、あるいは他の場所に直接移動したりするために利用できます。

2つめのグループは、主要なナビゲーションとマークアップするかどうかについて慎重に考慮する必要があります。自分のサイトの外部へのリンクのグループは、おそらくnavとマークアップすべきではありません。ただし、これはリンクの意図によります。リンクのグループが会社のイベントへの登録を目的としており、すべてEventbrite(イベント情報サイト)にリンクしているなら、サイトのナビゲーションに関連するリンクと見なせるでしょう。しかし、ブログロールのようにお勧めの他のサイトへのリンクを集めたものは、サイトのナビゲーションに関連するとは言えません。また、サイトのナビゲーションの一部をフッターで繰り返しているものは、nav要素としてマークアップする必要はありません。ただし、そうしても間違いではありません。

なお、nav要素には、順序なしリストだけでなく、様々なスタイルのナビゲーションを含めることができます。順序なしリストやP要素は最も一般的ですが、その気になればナビゲーションを詩や散文で書くことだって可能です。要素の目的がユーザーのナビゲーションにある限り、どんな形式でも完全に有効です。

Ian Hickson(WHATWGの議長)自身の発言を引用します。「<nav>は、<section>に<h1>ナビゲーション</h1>を付けたものも当てはまると思った場合だけ使用してください。」

<aside>

最後に残ったセクショニング要素は、asideです。この要素の名前は明らかに、従来「サイドバー」、「アサイド」、あるいは「サイドパネル」と呼ばれていたページの部分から来ています。これらの呼び方に「サイド」という語が入っているのは、ページの横の方に置かれていたことを反映しています。しかし、asideにはそのような意図は引き継がれていません。仕様には次のように書かれています。

「aside要素は、この要素を含むコンテンツとの関連性が希薄で、独立していると見なされるコンテンツから構成されるページのセクションを表す。このようなセクションは、印刷物ではサイドバーで表現されることが多い。

この要素は、引用枠やサイドバーなどのタイポグラフィ効果、広告、nav要素のグループなど、ページの主要なコンテンツから独立していると見なされるコンテンツに使用できる。」

「関連性が希薄で」というところは、原文では「tangentially related」という難しい表現になっていますが、要するにあまり関係がないということです。コンテンツをasideとマークアップするかどうかを決めるには、次のような質問を自分にしてみてください。この部分はコンテンツと独立と見なせるだろうか?これを取り除いてもドキュメントやセクションの意味に影響はないだろうか?

この要素は、ナビゲーションや広告のグループ(ページの横の方にあるものもそうでないものも)に使用することはもちろん、関連するセクションや記事の内部で使用することもできます。例えば、雑誌に似た形式の引用枠は次のようにマークアップされます。

[quote] <p>If you've ever chartered a 45ft catamaran, you know that mooring balls are your friends. They protect the coral and sea bottom from the constant abuse of frequently anchoring boats. They're also one of the easiest ways to secure yourself while at sea avoiding the dreaded "anchor watch" that can keep you awake half the night.</p> <aside> <q>Mooring balls protect the coral and sea bottom from constant abuse…</q> </aside> <p>Learning mooring techniques isn't overly difficult. Communication is key between the person grabbing the ball with the hook and the sailor at the helm.</p> [/quote]

引用枠は、記事の一部を特別な体裁で繰り返しているだけなので、これを取り除いても記事には影響がありません。記事から切り離せない挿入部分には、asideを使用すべきではありません。取り除くと記事(またはセクション)に影響があるものは、asideではないと考えてよいでしょう。

これらの新しいセクショニング要素すべてに言えることですが、悩むのはやめましょう。これらの要素が作られた目的は、divを使った場合よりもわかりやすいコンテンツを作成できるようにすることです。論理的に考え、意図が判るようにします。サイトをマークアップする際には、どこに情報を表示するかではなく、内容が何で、相互の関連がどうなっているかを考えます。後は、気楽にいきましょう。

関連要素

これまで説明してきた要素と密接な関係があるが、アウトラインの新しいセクションを作成しない要素がいくつか存在します。特に重要なものとして、headerとfooterが挙げられます。

<header>

header要素は、ページの上部に置かれることもありますが、真の意図はその中のコンテンツの重要性を示すことにあります(<header>要素と、ドキュメントの<head>や見出し要素h1h2h3などを混同しないでください)。仕様には次のように記されています。

「headerは、導入またはナビゲーションの補助となる情報の集合を表す。

header要素の目的は、通常、セクションの見出し(h1~h6要素またはhgroup要素)を入れることにあるが、これは必須ではない。header要素は、セクションの目次、検索フォーム、または関連のあるロゴを入れるためにも使用できる。」

1つのページに複数のheaderがあってもかまいません。ページには通常1つのグローバルheaderがありますが、セクショニング要素の中にもheaderが必要な場合があります。ただし、セクショニング要素は常に見出し要素を持ちます。これは単にh1h6のこともあり、場合によってはhgroupのこともあります。

<hgroup>

hgroupという新しい要素は、仕様に含められたり外されたりしてきました。最終的にどうなるかはまだわかりませんが、hgroup要素が作成された目的は、2つの見出しが間を置かずに並んでいて、ドキュメントの明示的なアウトラインには1つ目の方だけを反映させたい場合の、単なるラッパー(あるいは目隠し)として使用することです。例えば、次のようなサイト名とキャッチフレーズがあったとします。

<hgroup> <h1>The British Virgin Islands</h1> <h2>Jewels in the Caribbean</h2> </hgroup>

ドキュメントのアウトラインにはh1要素が表示されますが、h2はアウトラインからは見えません。

<footer>

headerと同様、1つのページに複数のfooter要素があってもかまいません。グローバルなfooterは通常1つですが、セクショニング要素もfooterを持つ場合があります。仕様には次のように書かれています。

footer要素は、最も近い上位のセクショニングコンテンツまたはセクショニングルート要素のフッターを表す。footerには通常、セクションの作成者、関連するドキュメントへのリンク、著作権情報といった、セクションに関連する情報が含まれる。

footer要素にセクション全体が含まれる場合は、付録、索引、長い奥付、詳細なライセンス契約などのコンテンツを表す。」

ブログの投稿をマークアップする場合、作成者や作成日時といった情報が投稿の上と下の両方に表示されることがあります。この情報をfooterに入れる場合、もちろんそれは適切ですが、どちらにもfooterを使用します。上の情報はheaderに入れ、下の情報はfooterに入れるということはしません。これは同じ情報なので、2回現れる場合でも同じ要素に入れるべきです。

<address>

addressは新しい要素ではありませんが、新しいセマンティック要素と組み合わせて用いられることが多いと予想されるため、ここで説明しておきます。誤解しないでください。address要素は、自分の住所や勤務先、会社の所在地などを表すものではありません。仕様の説明は次のとおりです。

「address要素は、最も近い上位のarticleまたはbody要素に関連する連絡先情報を表す。対象がbody要素の場合、連絡先情報はドキュメント全体に適用される。」

これは通常、著者に関連するメールアドレスやWebページのリンクを意味します。通常はfooterの中に置かれます。グローバルなfooterの場合は、ページ全体に関連します。articleのfooterの場合は、そのarticleだけに関連します。住所が使用されるのは、それが実際にそのarticleに関連する連絡先情報である場合だけです。

<figure>および<figcaption>

最後に紹介する要素は、figure要素です。

「…オプションでキャプションが付き、自己完結していて、通常は1つの単位としてドキュメントの主要なフローから参照される。

この要素は、イラスト、図、写真、コードリスト等の注釈に用いられる。これらはドキュメントの主要なコンテンツから参照されるが、ドキュメントのフローに影響を与えずに、ドキュメント本体から別の場所に移動することができる。例えば、ページの横、別の専用ページ、または付録などである。」

よくある間違いは、すべての画像をfigureで囲まなければならないという思いこみです。実際には、figure要素は本の図版のようなものと考えるとよいでしょう。写真の場合もあり、そうでない場合もあります。キャプションはある場合もない場合もあります。それはコンテンツのフローのどこに置かれているかによります。例えば、Web上のチュートリアルのコードサンプルや図に使用するのも、完全に論理的です。

figure要素にキャプション(figcaption要素)が含まれる場合、それは親のfigure要素の中にあります(図3を参照)。

<figure> <img src="virgin-gorda.jpg" alt="The boat as seen through the rocks at the Baths on Virgin Gorda."> <figcaption>The Baths at Virgin Gorda</figcaption> </figure>

古いブラウザー、新しい要素

現在のブラウザーは、新しいHTML5要素のほとんどを問題なく処理できます。しかし、古いブラウザーに対しては、多少の配慮が必要です。DreamweaverにHTML5パックがインストールされている場合(あるいはCS5.5を使用している場合)、新しく追加されたHTML5レイアウトを開くことができます。

  1. File(ファイル)/New(新規)/Blank Page(空白ページ)/HTML/HTML5:3 column fixed(3列固定)、header and footer(ヘッダーとフッター)を選択します。
  2. HTML5 doctypeを選択していることを確認して、「Create(作成)」をクリックします(図4を参照)。

CSSの最後に(添付した場合でも、ドキュメントのヘッドに残した場合でも)、次のコメントとセレクターがあるはずです。

/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */ header, section, footer, aside, nav, article, figure { display: block; }

表示プロパティをblockに設定すると、現在のブラウザーの古いバージョンで要素が正しく表示されます。ただし、Internet Explorer(IE)の古いバージョンに対しては、さらに手を加える必要があります(これはIE9より前のバージョンを指します)。IEは、要素がJavaScriptによってDOMに挿入されていないと、要素を認識しません。IEが認識したものは正しく表示されますが、認識しないものはそのまま残されます。このため、表示がおかしくなることがあります。ページの<head>要素の最後に次のコメントがあることに注意してください。

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

このリンクは、IE9より前のバージョンを対象としたIE条件付きコメント(IEだけに見えるコメント)です。これは、IEで正しく動作させるための小さなJavaScriptファイルにリンクしています。

このページの構造と、新しい要素自体を見てみてください。HTML5テンプレートを制作に使用する場合、サイトのセマンティックな構造に合わせて、要素を適切な場所に移動してください。asideがサイドバーに対応しないなど、大きな構造的不一致がある場合、Dreamweaverで空白のHTML5ページを新規作成し、強力なコードヒントとコードの完成機能を使用してカスタムページ構造を作成したほうが便利かもしれません。

次のステップ

新しい要素やセマンティクスの連続で頭が混乱している方は、シンプルに考えてみましょう。コンテンツのマークアップは、どこにあるかではなく何であるかに基づいて行います。コンテンツのその部分の目的を考え、どの要素がそれを最もよく反映するかを判断します。また、div要素が最も適切な要素であれば、それを使用しても全くかまいません。

HTML5セマンティクスの理解 – 第2部では、HTML4(あるいはXHTML—この記事ではこれらを同じ意味で使用します)とHTML5のドキュメント構造の違いについて、新しいグローバル属性の追加を含めて説明します。

HTML5セマンティクスの理解 – 第3部では、古い要素への変更について説明します。廃止されたものやセマンティックな意味が変更されたもの、中には再導入されたものもあります。

HTML5とCSS3の入門としては、David Powersの全3部のチュートリアルシリーズ「HTML5 and CSS3 in Dreamweaver CS5.5(Dreamweaver CS5.5でのHTML5とCSS3)」を参照してください。

HTML5、CSS3、および関連する位置情報、ストレージなどの新しいAPIについて詳しくは、HTML5デベロッパーセンターのリソースを参照してください。