|
|---|
この連載が本になりました！
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き!
HTML5マークアップ 現場で使える最短攻略ガイド
定価：2,808円 （本体2,600円）／形態：B5変 (240ページ)
ISBN：978-4-04-866070-9
第1回、第2回ではXHTML 1.0/HTML 4.01とHTML5の違いを大まかに解説してきました。今回からはHTML5におけるマークアップの仕様をより詳しく解説します。第3回では、HTML5コーディングの“キモ”と言える「セクション」と「アウトライン」をしっかり理解しましょう。
文書の概要を表す「アウトライン」
HTML5のコーディングでは、「アウトライン」を強く意識しながら進める必要があります。では、アウトラインとはそもそも何でしょうか？
アウトラインとは、一般的に「あらすじ」や「概要」といった意味で、HTMLにおいては「文書の概要」と考えてよいでしょう。もう少し具体的に、イメージしやすい例で言えば、アウトラインは「本の目次のようなもの」と説明できます。
本の目次は、本の中（本文）に含まれる見出しを抜き出して構成されています。HTMLのアウトラインも同じように、HTML内に含まれる見出しを抜き出した、「HTMLの目次のようなもの」と考えると分かりやすいでしょう。
本の目次は見出しを抜き出して構成されている
HTMLのアウトラインを見てみよう
本の目次は、章・節・項のようにツリー構造で文書の構造を表しています。HTMLのアウトラインも同じように、ツリー構造で表すことができます。以下のツールを使うと、WebページやHTMLファイルのアウトラインを判別して表示してくれます。
実際にHTMLがどのようなアウトラインになるか、簡単なサンプルで確かめてみましょう。サンプル1はHTML4.01の書き方で記述されたHTML5のソースコードです。
サンプル1[HTML4.01の書き方]
<h1>ねこについて</h1>
<p>思いのたけを語ります。</p>
<h2>ねこは、かわいい</h2>
<p>ねこがかわいいのは常識ですが、改めてその理由を考えてみます。</p>
<ul>
<li>もふもふだから</li>
<li>ねこだから</li>
</ul>
<p>納得ですね。</p>
<h2>ねこは、つよい</h2>
<p>実は、ねこはつよいのです。人間程度じゃ敵いません。</p>
<h3>ねこ vs 人間</h3>
<p>人間は刀を持ってねこと対等という意見がありますが、あれは嘘です。</p>
<p>かわいすぎて攻撃できないからです。</p>
<h2>ねこは、ふしぎ</h2>
<p>ねこは、たまに広場に集合していますね。とてもふしぎです。</p>
このサンプルのアウトラインは以下のようになります。インデント量によって大見出し・中見出し・小見出しのツリー構造を表しています。
サンプル1のアウトライン
ねこについて
ねこは、かわいい
ねこは、つよい
ねこ vs 人間
ねこは、ふしぎ
サンプル1のアウトラインは、新しい見出しのところでツリーの階層が変わっています。この階層の範囲を「セクション」と呼びます。本の目次は「見出しを抜き出したもの」でしたが、これとまったく同じように、見出し要素のレベル（大見出し・中見出し・小見出し）を手がかりにアウトラインを判別しています。
このサンプルのようにオーソドックスできれいなソースコードであれば、見出しからアウトラインを正しく判別できますが、より複雑なHTMLでは難しい場合もあります。
そこで、HTML5では、ソースコードからアウトラインを確実に判別する（ソースコードから概要を抜き出す）方法として、セクションの範囲を明示する要素が定義されました。
