セクションとアウトライン
通常、文書というものは、見出しがあり、それに伴うコンテンツがあります。さらに、そのコンテンツを内容に応じて分離することが多いといえます。分離されたコンテンツにも見出しを付け、文書の構造を表します。これは、書籍の目次などを想像してもらうと分かりやすいでしょう。
ウェブページも例外ではありません。文書量や見出しの数の違いはありますが、多かれ少なかれ、文書は章や節といった形で階層化されることになります。
旧来のHTMLでは、文書を階層化するために見出し要素が使われてきました。みなさんも良くご存じのh1～h6要素です。
<h1>表題</h1> <p>...</p> <h2>第1章</h2> <p>...</p> <h3>1.1. 節</h3> <p>...</p> <h2>第2章</h2> <p>...</p>
階層の深さ、つまり見出しレベルは、見出し要素の数字で表されます。しかし、旧来のマークアップでは、章や節の範囲を指定することはできず、見出し要素の出現によって、暗黙的に文書構造が理解されてきました。
旧来のマークアップでは、章や節に相当する範囲をdiv要素の中に入れることで、区切りを表さざるを得ません。しかし、div要素は、章や節といった意味を持つわけではないので、必ずしも、章や節を囲んでいるとは言い切れません。多くのサイトでは、実際にはCSSのフックとして利用していることが多いといえるでしょう。
セクションとアウトライン
HTML5では、このような暗黙的な文書構造のマークアップではなく、明示的に文書構造をマークアップできる方法が考え出されました。
<h1>表題</h1>
<section>
<h1>第1章</h1>
<section>
<h1>1.1. 節</h1>
</section>
</section>
<section>
<h1>第2章</h1>
</section>
section要素は、HTML5で新たに導入された要素です。見出しとそれに伴うコンテンツをsection要素の中に入れることで、明示的に章や節をマークアップできます。この章や節に相当する範囲をセクションと呼びます。
見出しレベルは、section要素の深さによって決まります。前述のマークアップ例では、すべての見出しをh1要素でマークアップしています。すべての章や節にsection要素を使っているため、見出しレベルを機械的に判定することが可能となります。極論を言えば、見出し要素は何でも構わないということになります。とはいえ、混乱を避けるためにも、見出しレベルに応じた見出し要素を使うべきであることは言うまでもありません。
これまで、h1～h6要素でも、暗黙的とはいえ、文書構造を表すことができました。では、なぜsection要素が必要なのでしょうか。人だけでなく、検索エンジンのロボットやスクリーン・リーダーといったソフトウェアから判別しやすくするというメリットがあります。しかし、別の理由として、旧来の暗黙的なアウトラインでは再現できない文書構造があるからです。
次のHTMLをご覧ください。最後にp要素で表された段落があります。これは、アウトライン上、どのセクションになるでしょう。
<h1>大見出し</h1> <div> <h2>小見出し1</h2> <p>...</p> </div> <div> <h2>小見出し2</h2> <p>...</p> </div> <p>今回の記事はいかがでしたか？ みなさんのご感想をお待ちしてます。</p>
この段落の文章を読む限りは、誰もがh2要素の「小見出し2」のコンテンツではなく、その外に属すると考えるでしょう。つまり、h1要素の「大見出し」のコンテンツの一部と解釈するでしょう。実際には、CSSでスタイリングすることで、誰が見ても、そのように解釈できるようにするはずです。
しかし、HTMLとしてのアウトラインでは、この段落は、2つ目の小見出しのセクションのコンテンツになってしまいます。このように旧来のマークアップでは、セクションの終わりを明示的に指定することができないため、柔軟な文書構造を表すことができなかったのです。
これは、section要素を使って解決できます。
<h1>大見出し</h1> <section> <h2>小見出し1</h2> <p>...</p> </section> <section> <h2>小見出し2</h2> <p>...</p> </section> <p>今回の記事はいかがでしたか？ みなさんのご感想をお待ちしてます。</p>
このようにsection要素を使って明示的にアウトラインをマークアップできます。HTML5では、セクションを表しアウトラインを構成する要素として、section要素の他に、article要素、nav要素、aside要素が新たに規定されました。
article要素とsection要素の違い
article要素は、section要素と同様に、セクションを表します。section要素は、章や節といった一般的なセクションを表すのに対し、article要素は、ブログエントリやニュース記事のように、単独で成り立つような独立したコンテンツの単位を表す場合に使います。
<article>
<h1>ブログ・エントリーのタイトル</h1>
<section>
<h2>見出し1</h2>
<p>本文</p>
</section>
<section>
<h2>見出し2</h2>
<p>本文</p>
</section>
</article>
この例は、ブログ・エントリー（記事詳細ページ）を想定したものです。このエントリー全体は、単独で成り立つコンテンツです。そのため、エントリー全体をarticle要素でマークアップしています。このエントリーにはセクションが2つ入れられています。しかし、個々のセクションは、それ単独で独立した記事とはいえません。そのため、個々のセクションにarticle要素を使うのは適切ではありません。ここでは、個々のセクションにsection要素を使っています。
単独で成り立つコンテンツの単位であれば、全文が掲載されている必要はありません。例えば、ブログ記事のヘッドラインを並べたページでもarticle要素を使うことが可能です。
<section>
<h1>新着エントリー一覧</h1>
<article>
<h2>タイトル1</h2>
<p>本文</p>
</article>
<article>
<h2>タイトル2</h2>
<p>本文</p>
</article>
</section>
この例は、ブログの新着記事の一覧を想定したものです。よくブログのトップページなどで掲載されるコンテンツです。個々のエントリーは、記事の要約または前半部分のみが掲載されていることが多いといえます。このような場合、個々の記事は、全文が掲載されていませんが、1つの独立した記事の単位を表しているため、article要素でマークアップします。
アウトラインのチェック
HTML5は、セクションを表すsection要素、article要素、nav要素、aside要素に加え、見出しを表すh1～h6要素の組み合わせに応じて、どのようなアウトラインを形成するのかを判定するアルゴリズムを規定しています。そのため、プログラムを通して機械的にアウトラインを判定できます。実際に、作成したHTMLがどのようなアウトラインを形成するのかをチェックしてくれるサイトがあります。
HTML5 Outlinerのフォームに、HTMLファイルを選択するか、URLを指定します。そして［Outline this!］ボタンを押すと、結果が表示されます。
次は、ブログのトップページを簡略的にマークアップしたものです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイト名</title>
</head>
<body>
<h1>サイト名</h1>
<p>サイトの説明</p>
<nav>
<h2>サイト・ナビゲーション</h2>
<ul>
<li><a href="/new/">最新記事</a></li>
<li><a href="/about/">運営者情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
<section>
<h2>新着エントリー一覧</h2>
<article>
<h3>タイトル1</h3>
<p>本文</p>
</article>
<article>
<h3>タイトル2</h3>
<p>本文</p>
</article>
</section>
<aside>
<h2>広告</h2>
<div>...</div>
</aside>
</body>
</html>
このマークアップがどのようなアウトラインを形成するのかをHTML Outlinerを使って調べてみると、次のような結果になります。
もしHTML5を使ってサイトを作った際には、どのようなアウトラインが形成されているのかをチェックすると良いでしょう。これによって、セクションを表す要素や見出し要素が適切に使われているかどうかを調べることができます。
