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

<section>タグの説明

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

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

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

<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>はページの中で一回までしか使えませんでした。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>

HTML Living Standard では、上記のように階層ごとに見出しを使い分ける記述も認めれらていますが、最終的には見出し要素もスマートにまとめられる可能性があります。文章構造の正確性を知りたい方は、アウトラインの概念を良く理解しておいて下さい。