トップページ | HTML5編・目次

●セクションとアウトラインの考察

更新日:

 HTML5では文書の構造を明確にするため、あるいは、特定の意味を持つ領域を定義する構造化のための新しい要素が幾つか追加されました。そのうち、section要素、article要素、aside要素、nav要素は、その範囲がひとつのセクションであることを示しています。これらの使い分けは別項にて解説するとして、これらセクションを示す要素は文書構造を明確にすると共にアウトラインを生成する役割も担います。HTML5におけるセクションとアウトラインの関係を説明する前に、まずはこのアウトラインの概要をしっかり把握しましょう。

■アウトラインとは

 アウトラインとはHTML5文書の概要を階層的に表すもので本に例えるならば、章・節・項といった目次のようなものです。Webページを本のように文章から章・節・項といった見出しになるようなものを抜き出してアウトライン、すなわち、文書の階層的な目次を作ろうというわけです。HTML5文書ではこのアウトラインを強く意識して作成する必要があります。まさにHTML5文書の構造的な記述においては、“きも”と言える部分でHTML5文書を作成する上で非常に重要なものです。このアウトラインがよく理解できていないとつまずくか、HTML5ドキュメントは作れないといっても過言ではありません。今日、HTML5のニーズと重要性がますます高まり、Webや書籍も含めて巷には多くのHTML5の解説が増えてきました。アウトラインについての解説も多くなってきました。しかし、誰が作って、なんのために作って、どのように表示され、扱われるものかといったようなことが具体的に書かれていないため、はじめて学ぶ方にとってはわかりにくいのではないでしょうか。

◆アウトラインについてのQ&A

Q:誰が作るのか?

A:ページ作者。Webページの制作者が文書のアウトラインが生成されるようにHTML5文書に記述します。

Q:誰のために、なんのために作るのか?Webページの読者のためにか?

A:将来的にあるいは間接的には読者のためになるかも知れませんが、今のところ、読者のために作るのではありません。ブラウザといったHTML5を解釈するUA(ユーザー・エージェント)のために、あるいはロボット検索エンジンといったプログラムなどが構文を解析して文書の内容を把握しやすいように作られると解釈されます。あるいは、将来的にアウトラインがWebページに表示されるように作っておくものと考えられます。元々、HTML5は、自社ブラウザの開発企業でもある米Apple、米Mozilla Foundation、Opera Software ASAが中心になって立ち上げられたWHATWGという団体によってその技術の仕様の検討がなされてきました。きっと必要性があるか、そのほうが都合が良いのでしょう。実際、これまではWebページの全体的なアウトラインは同じ文書内に配置された幾つかの見出しの有無や見出しのレベルで階層を推測するしか方法がありませんでした。しかし、HTML5では、ページ作者がアウトラインが生成されるように記述することでそのHTML5文書のアウトラインが明確にわかるようになります。長い目で見れば、ユーザーにとってアウトラインは有益になると考えられます。

Q:どのように作るのか?

A:見出し、および、セクションを構成する要素、アウトラインと関係のある要素を使って、あるいは組み合わせてWebページの全体的なアウトラインが生成されるように記述します。より具体的な作り方は後述を参照にしてください。

Q:どのように表示されるのか?見えるものなのか?

A:人の目には見えません。Webページの情報を収集するブラウザといったUAやロボット検索エンジンなどがWebページの内容を正確に把握できるように、判別しやすいようにするために作られるものと解釈されるのが妥当だと思います。

◆ツールを使って、アウトラインをチェックする

 記述したアウトラインをチェックするには、Google Chromeの拡張機能として「HTML5 Outliner」のアドオンが公開されているのでそれを利用してみるといいでしょう。そのWebページのアウトラインが表示され、文書の概要をチェックすることができます。今後は、ブラウザ側でもこういったアウトラインを表示させる機能が実装されることが想定されます。

◆アウトラインを表示させたときの画像

 Google Chromeのアドレスバー右端にあるアイコンをクリックすると、そのHTML5文書のアウトラインを確認することができます。また、目次をクリックするとその目次に該当する部分へ移動します。ただし、Webページとしてアップロードされている必要があります。今のところ、PC上のローカル環境ではアウトラインを表示させることはできません。

ツールを使って、アウトラインを表示させた画像

■セクションとセクション用の要素について

 HTML文書でいうセクションとは見出しやその内容を表す要素やテキストで構成される特定の範囲のコンテンツのことを指します。HTML5ではセクショニング・コンテンツのカテゴリーに属するセクション用の新しい要素が4つ追加され、用途や目的によって明確に区分できるようになりました。従って、それぞれのセクションに適した要素を使い分ける必要があります。文書の一般的なセクションまたはアプリケーション用のセクションには、section要素、ひとつの完結した記事のセクションである場合は、article要素、コンテンツの前後には関連性があるもののメインコンテンツから分離しても構わないセクションの場合には、aside要素、ナビゲーション用のセクションには、nav要素といった具合です。セクション用の要素については別項にて解説しますが、これらセクション用の要素は潜在的に見出しとアウトラインを持ちます。ただ、アウトラインを説明するにアウトラインと関係のある要素を多用するとわかりにくくなるのでここでは、section要素のみを使って、アウトラインを解説します。

■セクションの配置とアウトラインの作り方の一例

 下記のソースはここのページのHTML(HTML5)ソースを簡略化したものです。<section>~</section>で囲まれた領域がひとつのセクションでその中の見出しがアウトラインになると考えてください。(サンプル画像を張り出してあります。)

<!DOCTYPE html>
・・
<body>
<h2>●セクションとアウトラインの考察</h2>
・・
<section>
<h3>■アウトラインとは</h3>
・・
<section>
<h4>◆アウトラインについてのQ&amp;A</h4>
・・
</section><section>
<h4>◆ツールを使って、アウトラインをチェックする</h4>
・・
</section><section>
<h4>◆アウトラインを表示させたときの画像</h4>
・・
</section></section><section>
<h3>■セクションとセクション用の要素について</h3>
・・
</section><section>
<h3>■セクションの配置とアウトラインの作り方の一例</h3>
・・
</section><section>
<h3>■セクションとアウトラインのルール</h3>
・・
</section><section>
<h3>■hgroup要素について</h3>
・・
</section><section>
<h3>■まとめ</h3>
・・
</section>
</body>
</html>

■セクションとアウトラインのルール

 アウトラインはh1~h6の見出しやhgroupといったヘッディング・コンテンツに属する要素やセクショニング・コンテンツに属する要素、あるいは、セクショニング・ルートに属する要素と密接な関係があります。HTML5では同じページ内において、配置した見出しの次の見出しのランクが前の見出しのランクより上位になるとそこでいったんセクションが終了したと解釈され、新しいセクションが開始されるという暗黙のセクションが生成され、後に続く見出しのレベルが前の見出しレベルより低い場合は、元のセクションに含まれると解釈され、セクションは続くといった具合です。セクションとアウトラインのルールはおおよそ次の通りです。

・h1からh6要素までの最初の見出し、または、内容の見出しを見つけたらセクションであると解釈され、セクションが開始される。

・次の見出しを見つけたら最初の見出しのレベルと比較して、高いか同じであれば、現在のセクションを終了し、新しいセクションを開始する。

・次に見つかった見出しが最初の見出しと比較して低い場合は、同じセクション内に新しいセクションを開始する。

・セクション内の見出しにはh1~h6のいずれの見出しでも自由に入れることができるが最初の見出しにh1要素を使うことを推奨されている。

・セクション内の入れ子の見出しのレベルは適切なレベルを使う。(統一性を持たせる。セクションごとにバラバラの見出しを使わない。)

・特にセクションを示す要素を使わなくても見出しによって、暗黙のセクションが認識されますがセクションである範囲にはできるだけ、セクション用の要素を使うことが推奨されています。

■hgroup要素について

 HTML5では同じページ内において、配置した見出しの次の見出しのランクが前の見出しのランクより上位になるとそこでいったんセクションが終了したと解釈され、新しいセクションが開始されるという暗黙のセクションが生成されると説明しましたが、連続した見出しにおいて、セクションが終了するのを回避させたい場合の方法として、hgroup要素を使うことができます。hgroup要素は、連続した見出しをグループ化させるために使われる要素です。この要素を配置した場合、要素内容にはh1~h6のいずれか1つ以上を配置しなければなりません。また、hgroup要素の最初の見出ししかアウトラインに表示されません。二つ目以降の見出しはアウトライン上には表示されず無視されます。

追記:
 hgroup要素はW3CのHTML5仕様から削除されました。WHATWGの仕様では依然残っており、多くのブラウザで部分的に実装されているのですが、当サイトとしてはこの要素を使わないことを推奨します。

■まとめ

 ルールは記載しましたがセクションの配置やアウトラインの作り方は完全にこういう風に作らなければならないといったような決まりがあるわけではありません。十人十色ということわざがありますが文法上の誤りがなければ、ページ作者が十人いれば十人十色のアウトラインの作り方があってもいいわけです。階層もどこまでも深く、ツリー状に文書を構造化することは可能ですがあまり深くすると記述するのも大変なのでまずは数多く記述して慣れておくことが肝要ではないかと思います。

目次 | HTML5編・目次

Copyright (C) 2011 http://www.xml.vc/ All Rights Reserved.