HTML5についてのおさらい

W3G
Blog

Updated 2010.07.29 / Published 2010.07.29

これからHTML5を使いはじめようという方に向けたHTML5のおさらいです。HTML5の記述方法にはじまり、導入にあたって間違いやすいところや勘違いしがちなところをまとめてあります。

hgroup, header, footer要素の説明を含めた続きもあります(続HTML5についてのおさらい)。

HTML5の記述方法

まず最初に、必ずDOCTYPE宣言を行います。HTML5には公式のDTDがないので、すごくシンプルになっています。

<!DOCTYPE html>

続いて、html要素にドキュメントの言語を宣言します。

<html lang="ja">

そして順番にhead要素ときて、文字エンコーディングの指定ですが、charset属性が新たに利用できるようになりました。

<meta charset="UTF-8">

あとは今までで慣れ親しんだ書き方と同じなので、だいたいの骨格をまとめると次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5についてのおさらい - W3G</title>
<link rel="stylesheet" type="text/css" href="/common.css">
</head>
<body>
...
</body>
</html>

なお、html,head,body要素とlink, script要素に設定するtype属性（例：type="text/css", type="text/javascript"）は省略可能です。こうするとさらにすっきり。

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5についてのおさらい - W3G</title>
<link rel="stylesheet" href="/common.css">
...

XHTMLの記法になれてしまった方には朗報。終了タグの存在しない要素については、HTMLシリアライゼーションでもXHTMLのように />を付け足すこともできます。

<meta charset="UTF-8" />

HTML5の新要素を使うには

Firefox, Chromeが着々とシェアを伸ばしてはいますが、まだまだ全体的に見るとInternet Explorerがブラウザシェアの過半数を占めており、現在正式リリースされている最新バージョンであるInternet Explorer8でさえも、HTML5の新要素は未知の要素として、無視して取り扱われます。そのためHTML5の新要素を使うには、IEにとって未知の要素であるHTML5の新要素をレンダリングが行われる前に、その存在を覚えさせてあげる必要があります。

その方法とはdocument.createElement(HTML5の新要素名);をhead内など先に記述しておきます。ですが、新要素の数はけっこうあるので、これを一つずつ記述するのは非常に面倒です。そこで、古いブラウザでもHTML5が使えるようになる便利なオープンソースのライブラリが用意されていますので、次のJavaScriptをhead内に読み込ませれば、すぐにHTML5の新要素が使えるようになります。

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

最初のがコメントで囲まれていますが、これはIEの独自仕様でIEだけ「もしIE9未満だった場合にのみ実行する」というコードとしてこれを解釈します。IE9からはHTML5に標準対応予定なので、このライブラリを読み込む必要がないためにこのように記述します。

カテゴリ分けを知っておこう

HTML5では要素ごとに目的に応じたグループ分けがなされており、従来のインライン要素にブロックレベル要素を含めることができないといった概念と同様、そのカテゴリに属する要素にはどんなコンテンツ（要素およびテキスト）を含めることができるのかが定義されています（コンテンツ・モデルを参照）。

このグループ分けによってできたカテゴリには次の8つがあります。

メタデータ・コンテンツ

主にドキュメントのメタデータや、スタイル、スクリプトの定義を行う要素がこれに分類されています。

フロー・コンテンツ

body内（一部例外あり）に記述するコンテンツ（要素およびテキスト）全般がフロー・コンテンツに属します。ですので、HTML5の要素の多くはフロー・コンテンツに属し、フロー・コンテンツに属する要素は他のカテゴリにも属しています。

セクショニング・コンテンツ

アウトライン（階層構造）を形成し、その内容が含んでいる範囲を定義する要素がこれに属します。

要素名を書き出しておきます。article,aside,nav,sectionの新要素です。

ヘッディング・コンテンツ

見出し関連の要素が属します。

フレージング・コンテンツ

これまでのインライン要素と似たようなものでテキストノードの要素がこれに属します。

エンベッディド・コンテンツ

他のリソースを組み込む要素やSVG, MathMLなどのHTMLではない別の言語で表されるコンテンツがこれに属します。

インタラクティブ・コンテンツ

ハイパーリンクなどユーザが何かしらの操作ができる要素がこれに属します。

セクショニング・ルート

独立した自身のアウトライン（階層構造）をもつことができる要素がこれに属します。

要素名を書き出しておきます。blockquote,body,details,fieldset,fiqure,tdの要素です。

Aの要素の中にBの要素を含めてはいけないなどの構文については間違っていれば単純に文法エラーとなりますので、そこはコンテンツ・モデルを参照してもらうとして、以上の8つのカテゴリ分けの中でもアウトライン（階層構造）に関わるところを強調したように、HTML5でのマークアップをはじめるにあたって重要になってくるのがアウトライン（階層構造）を意識したマークアップです。HTML5でのマークアップをはじめる際にはセクションとアウトラインの関係についてしっかりと理解しておく必要があります。ここからが本題で、以下、主にアウトラインを意識したマークアップのための説明です。

暗黙のセクションについて

これから説明するセクションというのは、section要素のことではなく、概念上のセクションという意味です。

<body>
<h1>A</h1>
<p>B</p>
<h2>C</h2>
<p>D</p>
<h3>E</h3>
<p>F</p>
<h2>G</h2>
<p>H</p>
</body>

HTML4やXHTML1では、どこからどこまでがその範囲なのかを明示的に示す要素はなかったため、h1〜h6の見出し要素を使って、その手がかりとしていました。HTML5に適合するUAであれば、HTML5のドキュメントにおいては、上記のようにセクショニング・コンテンツで明示されていない場合、アウトライン・アルゴリズムに従って、見出し要素が登場する度に、自動的に新たなセクションが始まるものと見なします。つまり次のようなアウトライン（階層構造）が形成されます。

A...bodyセクションの見出しで、段落のBを含んでいる
1. C...暗黙のセクションを開始する見出しで、段落のDを含んでいる
  1. E...暗黙のセクションを開始する見出しで、段落のFを含んでいる
2. G...暗黙のセクションを開始する見出しで、段落のHを含んでいる

今度は上記の内容をセクショニング・コンテンツを使ってセクションを明示したマークアップを例にとってみましょう。なお、暗黙のセクションを取り上げましたが、HTML5のマークアップをする際は、この暗黙のセクションに依存するのではなく、必ずセクショニング・コンテンツでセクションを明示するようにしましょう。

セクショニング・コンテンツを使ったセクションについて

先の内容であれば、マークアップにはsection要素が妥当なので、section要素でセクションを明示していきます。

<body>
<h1>A</h1>
<p>B</p>
    <section>
    <h2>C</h2>
    <p>D</p>
            <section>
            <h3>E</h3>
            <p>F</p>
            </section>
    </section>
    <section>
    <h2>G</h2>
    <p>H</p>
    </section>
</body>

これで上記でもHTML5に適合するUAであれば暗黙のセクションの際と同じアウトライン（階層構造）が形成されます。

A
1. C
  1. E
2. G

このようにHTML5ではセクションを明示したマークアップで、アウトライン（階層構造）を形成していく要領がつかめたかと思います。セクションを明示するセクショニング・コンテンツはsection要素だけでなく、他にもarticle,aside,navが存在し、どのように使い分ければ良いのかを迷うところでもあるのでそれぞれの用途について簡単に触れておきます。

`article`要素

それ自身が独立した自己完結のコンテンツであることを表すのに使います。ブログのエントリーやエントリーへの各コメントなどです。RSS等のフィードで提供する内容に相応しかどうかで、article要素を使うかどうかの基準となります。

`aside`要素

メインコンテンツから切り離すことができるコンテンツ（このコンテンツがなくなってもページが成り立つというコンテンツ）である場合に使います。メインコンテンツの中で使うか、外で使うかによって意味が変わってきます。たとえば、article要素の中で使う場合は、メインコンテンツの内容と何かしらの関連性がなければなりません。補足記事やブログのエントリーに対する各コメント（article要素として表すほどコメント自体が重要でないブログの場合）などが該当します。中で使う場合に対して、メインコンテンツの外で使う場合は、サイトやページ全体に関連性があることを示し、サイドバー（サイトによってはサイドではないかもしれません）や広告などに使います。

aside要素のセクション内に無理に見出しを入れる必要はなく、HTML5適合UAであればデフォルトでSidebar等(UAにより異なります)の見出しを生成してくれるはずです。サイドバーの用途じゃなくてもSidebarとなる点については気にしなくて大丈夫です。

`nav`要素

主要なナビゲーションである場合に使います。aside要素のようにメインコンテンツ内で使う場合は、パンくずリストなどメインコンテンツに関連したナビゲーションであることを示すのに使ったり、メインコンテンツの外であれば、サイトやページ全体に関連するナビゲーションであることを指し示すためのグローバルナビゲーションなどに使用します。ただし、ヘッダとフッタの両方に全く同じリンク先の内容が重複しているようなナビゲーションの場合には、ヘッダの方のナビゲーションにだけnav要素を使い、フッタの方にもnav要素を使用することは適しません。主要であることが大事で、ページ内に存在するナビゲーションの種類が多いか少ないかにもよりますが、ページ内の2〜3の主要なナビゲーションに使うのが良いのではないでしょうか。

aside要素と同じでセクション内に無理に見出しを入れる必要はなく、HTML5適合UAであればデフォルトでNavigation等(UAにより異なります)の見出しを生成してくれるはずです。

`section`要素

章・節・項のようなもっとも汎用的なセクションを表すのに使います。他のセクショニング・コンテンツ（article, aside, nav）の方が適しているような内容の場合には、必ずそちらを使います。また、自然に見出しを入れられない（見出しを伴えない）ような内容の場合や、スタイリングのためやスクリプティングを動作させる起点のためにsection要素を使ってはいけません。スタイリングやスクリプティング用途であれば、div要素を使います。

もし、section要素内に見出しを伴えない場合、そのセクションはUntitled sectionとなります。この間違いも多いので、HTML5を使いはじめる際は、section要素によるセクションでUntitled sectionを生み出さないように注意しましょう。

では、以上をふまえて、次のようなHTML5ドキュメントの場合はどのようなアウトラインが形成されるか想像がつくでしょうか。

<body>
    <nav>
    <p><a href="/">Home</a></p>
    </nav>
<p>Hello world.</p>
    <aside>
    <p>My cat is cute.</p>
    </aside>
</body>

上記にはbody,nav,aisdeの3つのセクションが存在しますが、問題はセクショニング・ルートであるbody要素に対する見出しが存在しないことです。このため、この場合のアウトライン（階層構造）は次のように形成されてしまいます。

Untitled document
1. Navigation
2. Sidebar

これもHTML5の使いはじめの際によくやってしまいがちな間違いですので気をつけましょう。

また自分のドキュメントにて、どのようなアウトライン（階層構造）が形成されているかを確認できるオンラインツール（HTML 5 Outliner）もあるので、ぜひ利用しましょう。このツールでは、aside, navのデフォルトの見出しは生成しないので、Untitled sectionとなりますが、aside, navによるセクションの場合のUntitled sectionは間違いではありませんので気にしなくて大丈夫です。

見出しレベルの正しい使い方

最後にもうひとつ、以下は推奨事項ですが、HTML5でのマークアップの際には気をつけておくべきなのが、見出しレベルの使い方です。

セクション内には、h1からh6までのどのレベルの見出しをも含むことができるのですが、h1要素だけを使うか、または、セクションのネストに合ったレベルの見出し要素を使うかの、どちらかの見出しレベルの出現ルールに沿ったマークアップをすることが強く推奨されています。

また、「暗黙のセクションに依存するのではなく...」と先述していたように一つのセクション内に複数の見出しを入れるのではなく、見出しごとにセクションを明示的に包含させていくことが推奨されています。

h1要素だけを使った場合は、下記のようになります。

<body>
<h1>A</h1>
<p>B</p>
    <section>
    <h1>C</h1>
    <p>D</p>
            <section>
            <h1>E</h1>
            <p>F</p>
            </section>
    </section>
    <section>
    <h1>G</h1>
    <p>H</p>
    </section>
</body>

セクショニング・ルートにおける見出しとアウトライン

なお、セクショニング・ルートであるblockquote,details,fieldset,fiqure,tdの要素内に見出しを伴う際は、独自のアウトラインをもつことになるので上位要素からの見出しレベルを継承しません。

たとえば、h1要素から開始してセクションのネストに合った見出しレベルに沿ったマークアップをしていたのであれば、セクショニング・ルート内では見出しレベルをリセットして、再びh1要素から開始させることもできます（もちろん、どのレベルの見出しをも含むことができるので、そのセクショニング・ルート内での後続の見出しレベルがセクションのネストにあった見出しレベルの使い方に沿っていればh1要素以外から開始しても可です）。

<body>
<h1>A</h1>
<p>B</p>
    <section>
    <h2>C</h2>
    <p>D</p>
        <blockquote>
        <h1>E</h1>
        <p>F</p>
            <section>
            <h2>G</h2>
            <p>H</p>
            </section>
        </blockquote>
    </section>
</body>

このHTML5ドキュメントの場合のアウトライン（階層構造）は次のように形成されます。

A
1. C

blockquote要素に含まれているEとGが見当たりませんが、これは前述のとおり、セクショニング・ルートのアウトラインは自身のアウトラインとして独立するので、blockquote要素のセクションはここからは別離しているためです。