このページの本文へ

DESIGN 浜 俊太朗のHTML5マークアップ移行ガイド ― 第3回

HTML5のアウトラインとセクションを理解する

2011年10月19日 13時00分更新

浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷
連載インデックスへ

この連載が本になりました!

「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の目次のようなもの」と考えると分かりやすいでしょう。

ss/book.psd
本の目次は見出しを抜き出して構成されている

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では、ソースコードからアウトラインを確実に判別する(ソースコードから概要を抜き出す)方法として、セクションの範囲を明示する要素が定義されました。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング