トップページ >  HTML5 >  文書構造の明確化
初版2011/06/17： 最終更新日2011/06/17
文書構造の明確化
目次
・文書構造の明確化「セクショニング」とは
・HTML5以前の文書構造
・文書構造の明確化の要素
・HTML5の文書構造
・Internet Exploreとセクショニング
文書構造の明確化「セクショニング」とは

セクショニングとは、HTML文書やWEBアプリケーションにおいて、意味や機能によりまとめることを言います。
一般的な文章の中には、見出しとなる部分、主文となる部分、補足となる部分など、文書の構造によりその内容の意味合いが変わることが多くあります。

例えば、新聞を例にすると、

  • 記事の見出し
  • 記事の概要
  • 記事の内容
  • 補足事項(記者名など)
で一つの記事となります。
それら記事が、複数記事が集まり一つの紙面。
複数の紙面が集まり、新聞となります。
このように、文書の構造そのものに意味合いが存在します。
この文書構造の意味合いを明確にすることが、「セクショニング」です。

これまでのHTMLでも、divなどの要素とid属性やclass属性を用いて文書構造を作成することは出来ました。
しかし、それはスタイルやスクリプトの実行範囲を示しているに過ぎず、HTML文書の構造を定義するものではありませんでした。

HTML5では、文書構造の意味合いを明確化することで、シンプルで理解しやすいものにするほか、構造化されたコンテンツにより、プログラムからの操作性向上や活用の幅を広げることを目指しています。

HTML5以前の文書構造

HTML5以前の仕様でも、見出しを表すh1～h6要素や文書ブロックを表すdiv要素、段落を表すp要素が存在しています。
しかし、これらで上記の新聞のような構造を作ろうとすると、意味合いを示す要素が足りません。
そのため、これまではid属性やclass属性で仕分けていました。

リスト1. これまで文書構造の記述例

<div id="article">
	<div id="nav">
		<h3>目次</h3>
		<ul>
			<li><a href="#section_1">第1章</a></li>
			<li><a href="#section_2">第2章</a></li>
		</ul>
	</div>
	<div id="section_1" class="sections">
		<h3 class="section-title">第1章の主見出し</h3>
		<h4 class="section-subtitle">第1章の副見出し</h4>
		<p>ここに第1章の主となる文章が書かれます。</p>
		<div class="aside">第1章の補足事項</div>
	</div>
	<div id="section_2" class="sections">
		<h3 class="section-title">第2章の主見出し</h3>
		<h4 class="section-subtitle">第2章の副見出し</h4>
		<p>ここに第2章の主となる文章が書かれます。</p>
		<div class="aside">第2章の補足事項</div>
	</div>
</div>

div要素が入れ子になり、id属性やclass属性によって文書構造を保っています。
またh3要素やh4要素は、見出しを意味するよりも、文字サイズの違いで用いられます。

文書構造の明確化の要素
HTMLはマークアップ言語であり、HTML4以前でも文書構造を示すことはできました。
その際、要素をグループ化するには、div要素を使って行ってきました。
しかし、id属性やclass属性で区別はしていましたが、全てdiv要素であるため、要素だけでは文書構造の区別がつきませんでした。
HTML5では、文書構造を表す新しい要素が加わることで、ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようになります。
<body>
文書全体を示します。
HTML文書の中には1つだけ設置することが出来ます。
<article>　《新要素》
自己完結する文書を示します。
記事やブログのエントリなどがこれに当たります。
※上記の例では「id="article"」のdiv要素が相当します。
<section>　《新要素》
章や節など、文書的な意味のひとまとまりを示します。
※上記の例では「class="sections"」のdiv要素が相当します。
<nav>　《新要素》
ナビゲーションを示します。
目次などに用います。
※上記の例では「id="nav"」のdiv要素が相当します。
主要なナビゲーションとなるセクションのみを示すのに適しています。
このページの「目次」がこれに当たります。
このページの下部にある「home」リンクは、このnav要素ではなく、後述のfooter要素に入れるとよいでしょう。
<aside>　《新要素》
主題から離れた内容を示します。
余談や補足などに使います。
手紙における追伸のようなものです。
※上記の例では「class="aside"」のdiv要素が相当します。
<address>
連絡先・問合せ先を示します。
<hgroup>　《新要素》
見出しのグループを示します。
主題と副題などをひとグループとする場合などに用います。
※上記の例では「class="sections"」のdiv要素内のh3要素とh4要素を括る場合に用います。
<h1>～<h6>
見出しを示します。
数値が小さいほど高いランクの見出しとなります。
見出しを配置すると暗黙的に新しいセクションを開始したことになります。
暗黙的にそれぞれがセクションとみなされますが、 明示的にセクションで区切ることが推奨されています。
上記の<hgroup>で括ることで、ランクの高い要素(例えば<h1>)を主題とし、文書が要約される場合などは同じグループ内のランクの低い要素(例えば<h2>)は副題として隠されるます。
<header>　《新要素》
イントロダクション(導入部)やナビゲーション(目次など)となるグループを示します。
「id="header"」や「class="head"」などの属性を持つdiv要素に相当します。
このページでは、「目次」より上の部分がこれに当たります。
<footer>　《新要素》
フッター(脚注など)、その文書に関する情報となるグループを示します。
「id="footer"」や「class="foot"」などの属性を持つdiv要素に相当します。
このページでは、このページの下部にある「home」リンクを含む部分やそれ以下がこれに当たります。
HTML5の文書構造

上記「リスト1. これまで文書構造の記述例」をHTML5の文書構造に沿って書き直すと以下のようになります。

リスト2. HTML5の文書構造の記述例

<article>
	<nav>
		<h3>目次</h3>
		<ul>
			<li><a href="#section_1">第1章</a></li>
			<li><a href="#section_2">第2章</a></li>
		</ul>
	</nav>
	<section id="section_1">
		<hgroup>
			<h3>第1章の主見出し</h3>
			<h4>第1章の副見出し</h4>
		</hgroup>
		<p>ここに第1章の主となる文章が書かれます。</p>
		<aside>第1章の補足事項</aside>
	</section>
	<section id="section_2">
		<hgroup>
			<h3>第2章の主見出し</h3>
			<h4>第2章の副見出し</h4>
		</hgroup>
		<p>ここに第2章の主となる文章が書かれます。</p>
		<aside>第2章の補足事項</aside>
	</section>
</article>
Internet Exploreとセクショニング

最新のFireFox、Safari、Chromeなどはセクショニングに対応しています。
Internet Exploreについては、IE9以降の対応となります。
IE8までに対応するためには、新要素をJavascriptで宣言しておく必要があります。

リスト3. IE8までの対応例

<script>
	document.createElement('section');
</script>
HOME