HTML

セクション

セクションの意味

　セクションとは、章や節のように、見出しと、それに関する内容でまとめられた領域を指します。

　通常は、最初に見出しがあり、その後に、それに関する文章などが続きます。本来、ドキュメントというのは、セクションの塊と言えます。ウェブ・ページもそうですし、書籍などもそうです。

　書籍で言えば、１冊全体が１つの大きなセクションと言えます。書籍のタイトルがあり、そして、書籍の内容があります。そして、この大きなセクションの中には、章があります。これらの章それぞれもセクションに例えられます。さらに、それぞれの章の中には、いくつかの節がありますが、これもセクションに例えられるでしょう。

　このように、ウェブ・ページも、まず大きなセクションがあり、その中に、様々な階層のセクションが並べられたものと捉えます。

HTML4や XHTML1の欠点

　HTML4や XHTML1では、マークアップだけで、どこまでが１つのセクションを構成しているのかを明示的に示す事ができませんでした。h1～h6要素だけが、セクションを区別できる手がかりでした。

<h1>HTML5</h1>
<p>HTML5とは...</p>
<h2>要素</h2>
<p>要素とは...</p>
<h3>section要素</h3>
<p>section要素とは...</p>
<h3>article要素</h3>
<p>article要素とは...</p>
<h2>DOM</h2>
<p>DOMとは...</p>

　これは、実際には、階層を持ったドキュメントのつもりなのですが、マークアップ上は同じ階層に位置しています。h1要素や h2要素などの見出しのレベルによって、暗黙に階層化されている事を示しています。

HTML5で明示的に階層を示す方法

　一方、HTML5では、セクションを明示的に囲むための要素が規定されました。section, article などのセクショニング・コンテンツに属する要素が、その役割を担います。これらの要素を使えば、明示的に階層を示す事ができます。

<h1>HTML5</h1>
<p>HTML5とは...</p>
<section>
	<h2>要素</h2>
	<p>要素とは...</p>
	<section>
		<h3>section要素</h3>
		<p>section要素とは...</p>
	</section>
	<section>
		<h3>article要素</h3>
		<p>article要素とは...</p>
	</section>
</section>
<section>
	<h2>DOM</h2>
	<p>DOMとは...</p>
</section>