セクション

文章に、章、段落、補足、目次などがあるように、HTML5では、ドキュメントを、セクションに区画する。

要点

  • セクションとは、ドキュメントを区画した区分のこと。
  • 文章に、章、段落、補足、目次などがあるように、HTML5では、ドキュメントを、セクションに区画する。
  • 各セクションは、関連する見出しを１つだけ持つことができる。
  • 各セクションは、更に複数のセクションを内在し、階層を深化できる。セクションの階層構造を、アウトラインという。
  • 区画方法は、2つある。セクショニング・コンテンツ要素で明示的に区画する方法と、見出し要素（h1～h6要素）で暗黙的に区画する方法だ。HTML5は、明示的にセクションを区画することを推奨している。

サンプルコード

明示的に区画

セクショニング・コンテンツ要素で明示的に区画したサンプルコード。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
</head>
<body>
	<h1>第１階層</h1>
	<p>bodyセクション。</p>
	<article>
		<h2>第２階層</h2>
		<p>記事セクション。</p>
		<section>
			<h3>第３階層の１つ目のセクション</h3>
			<p>section要素内のp要素。</p>
			<p>...</p>
		</section>
		<section>
			<h3>第３階層の２つ目のセクション</h3>
			<p>section要素内のp要素。</p>
			<p>...</p>
		</section>
	</article> 
</body>
</html>

暗黙的に区画

見出し要素（h1～h6要素）で暗黙的に区画したサンプルコード。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
</head>
<body>
	<h1>第１階層</h1>
	<p>bodyセクション。</p>
		<h2>第２階層</h2>
		<p>記事セクション。</p>
			<h3>第３階層の１つ目のセクション</h3>
			<p>section要素内のp要素。</p>
			<p>...</p>
			<h3>第３階層の２つ目のセクション</h3>
			<p>section要素内のp要素。</p>
			<p>...</p>
</body>
</html>