<section> ページ内のセクションを定義する

<section>タグの説明

<section>は、ウェブページ内の文章やコンテンツの一部をまとめて、その部分が一つのセクションであることを定義します。

文章構造における「セクション」とは、ドキュメント全体のうち、ある部分からある部分までを「一つのまとまり」として見なす節目のことです。人間は、文字の大きさやデザイン、そして書かれている文字列そのものによって、文章の意味や構造を把握する能力を持っています。しかし、コンピュータは人間の言語を理解することができないため、HTMLによって文章のアウトラインを明示する必要があります。

文章のアウトラインとは、書かれている文字列に与えられる構造的な意味の事です。小説で例えるなら、物語全体の中の「章」、学校で例えるなら、一日の学習における「時間割り」をイメージしてみてください。

<section>タグの特徴

<section>はページ内に複数使うことができます。入れ子にすることも可能で、文章の中に複数のセクションがあることを明示できます。

この要素はセクショニングコンテントなので、文章構造のアウトラインに影響を与えます。原則として見出しを含むことを想定しているので、必ず子要素に<h1>（〜 <h6>）を記述するようにしましょう。

<section>タグに指定できる属性

グローバル属性

基本的に全てのHTML要素に共通で指定できる属性です。

イベントハンドラ

基本的に全てのHTML要素に指定することができるコンテンツ属性です。

<section>タグの使い方とサンプル

まずは簡単なサンプルを見てみましょう。例えば、一つの文章の中に、まえがき、本文、あとがきが書かれている場合には、それぞれの文章を<section>タグで囲い、各要素に見出しを加えることで文章を構造化することができます。

<article>
	<h1>この文章のタイトル</h1>

	<section>
		<h1>まえがき</h1>
		<p>セクションの段落。セクションの段落。</p>
	</section>

	<section>
		<h1>本文のタイトル</h1>
		<p>セクションの段落。セクションの段落。</p>
	</section>

	<section>
		<h1>あとがき</h1>
		<p>セクションの段落。セクションの段落。</p>
	</section>
</article>

上記の例では、ウェブページの中に独立した記事があり、その記事が複数のセクションで分けられる構造だった場合のマークアップを示しています。ここでは、<section>を<article>の子要素として扱っています。この例で注目すべき点は、各要素の親子関係と見出しの付け方です。

HTML5以前のマークアップでは、<h1>タグは1ページの中で一回までしか使えませんでした。HTML4の時点では、文章のアウトラインを定義できるタグが少なかったため、<h2>〜<h6>を使って、見出しの重要度で表現していたからです。

<div>
	<h1>この文章のタイトル</h1>
	<p>文章の内容。文章の内容。文章の内容。</p>

	<h2>第一章の見出し</h2>
	<h3>節の小見出し</h3>
	<p>文章の内容。文章の内容。文章の内容。</p>
	<p>文章の内容。文章の内容。文章の内容。</p>
	<h3>節の小見出し</h3>
	<p>文章の内容。文章の内容。文章の内容。</p>
	<p>文章の内容。文章の内容。文章の内容。</p>

	<h2>第二章の見出し</h2>
	<h3>節の小見出し</h3>
	<p>文章の内容。文章の内容。文章の内容。</p>
	<p>文章の内容。文章の内容。文章の内容。</p>
	<h3>節の小見出し</h3>
	<p>文章の内容。文章の内容。文章の内容。</p>
	<p>文章の内容。文章の内容。文章の内容。</p>
</div>

改めて上記の記述を見ると、非常に曖昧な文章構造であることが分かります。このマークアップでは、文章の内容が書かれた各段落が、一体どの章や節に結びついているのか、関連付けがされていません。人間は書かれた内容からアウトラインを予測することができますが、コンピューターは定義されたアウトラインから、書かれている内容の重要度を予測します。

セマンティック・ウェブ（semantic web）のコンセプトでは、より明確な文章構造を意識したマークアップが求められます。今までのように見出しや段落を平面的に配置するのではなく、文章全体を立体的に構築していくように心がけてください。

<article>
	<h1>この文章のタイトル</h1>

	<section>
		<h2>第一章の見出し</h2>
		<section>
			<h3>節の小見出し</h3>
			<p>文章の内容。文章の内容。文章の内容。</p>
			<p>文章の内容。文章の内容。文章の内容。</p>
		</section>
		<section>
			<h3>節の小見出し</h3>
			<p>文章の内容。文章の内容。文章の内容。</p>
			<p>文章の内容。文章の内容。文章の内容。</p>
		</section>
	</section>

	<section>
		<h2>第二章の見出し</h2>
		<section>
			<h3>節の小見出し</h3>
			<p>文章の内容。文章の内容。文章の内容。</p>
			<p>文章の内容。文章の内容。文章の内容。</p>
		</section>
		<section>
			<h3>節の小見出し</h3>
			<p>文章の内容。文章の内容。文章の内容。</p>
			<p>文章の内容。文章の内容。文章の内容。</p>
		</section>
	</section>
</article>