section要素

section要素は、ドキュメント（文書）やアプリケーションの一般的なセクションを示す要素。

カテゴリー フロー・コンテンツ。セクショニング・コンテンツ。パルパブル・コンテンツ。
コンテキスト フロー・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フロー・コンテンツを内包できる。
属性 グローバル属性。
ブラウザ対応

要点

  • section要素は、ドキュメント（文書）やアプリケーションの一般的なセクションであることを示す要素である。
  • section要素におけるセクションとは、コンテンツをテーマ別に分けたもの。例えば、文章における章や段落などのこと。
  • section要素の中には、セクションのテーマを括った見出し要素（h1～h6要素）を用意するのが一般的だ。必須ではない。
  • section要素は、セクショニング・コンテンツである。新たなセクションを区画する。
  • 他にふさわしいセクショニング・コンテンツ要素（下記の要素）があれば、それらを検討する。
    • article要素：自己完結する記事であることを示すセクション。
    • nav要素：ナビゲーションであることを示すセクション。
    • aside要素：メインコンテンツでないこと（余談、補足）を示すセクション。
  • レイアウト（スタイリング）目的だけであれば、section要素ではなく、div要素を使う。
  • section要素は、HTML5にて新たに導入された要素である。

サンプルコード

<section>
	一般的なセクション。
</section>

サンプル

１つのセクション

HTMLソースコード
<section>
	<h1>見出しＡ</h1>
	<p>１つ目のセクション。</p>
</section>
実際の表示

見出しＡ

１つ目のセクション。

３つのセクション

HTMLソースコード
<section>
	<h1>見出しＡ</h1>
	<p>１つ目のセクション。</p>
</section> 
<section>
	<h1>見出しＢ</h1>
	<p>２つ目のセクション。</p>
</section> 
<section>
	<h1>見出しＣ</h1>
	<p>３つ目のセクション。</p>
</section>
実際の表示

見出しＡ

１つ目のセクション。

見出しＢ

２つ目のセクション。

見出しＣ

３つ目のセクション。

入れ子

HTMLソースコード
<section>
	<h1>見出しＡ</h1>
	<p>１つ目のセクション。</p>
	<section>
		<h2>見出しＡ－Ａ</h2>
		<p>１つ目のセクションの中の１つ目のセクション。</p>
		<section>
			<h3>見出しＡ－Ａ－Ａ</h3>
			<p>１つ目のセクションの中の１つ目のセクションの中の１つ目のセクション。</p>
		</section> 
		<section>
			<h3>見出しＡ－Ａ－Ｂ</h3>
			<p>１つ目のセクションの中の１つ目のセクションの中の２つ目のセクション。</p>
		</section> 
	</section> 
	<section>
		<h2>見出しＡ－Ｂ</h2>
		<p>１つ目のセクションの中の２つ目のセクション。</p>
	</section> 
	<section>
		<h2>見出しＡ－Ｃ</h2>
		<p>１つ目のセクションの中の３つ目のセクション。</p>
	</section> 
</section> 
<section>
	<h1>見出しＢ</h1>
	<p>２つ目のセクション。</p>
</section>
実際の表示

見出しＡ

１つ目のセクション。

見出しＡ－Ａ

１つ目のセクションの中の１つ目のセクション。

見出しＡ－Ａ－Ａ

１つ目のセクションの中の１つ目のセクションの中の１つ目のセクション。

見出しＡ－Ａ－Ｂ

１つ目のセクションの中の１つ目のセクションの中の２つ目のセクション。

見出しＡ－Ｂ

１つ目のセクションの中の２つ目のセクション。

見出しＡ－Ｃ

１つ目のセクションの中の３つ目のセクション。

見出しＢ

２つ目のセクション。

article要素の中にsection要素

HTMLソースコード
<article>
	<h1>見出しＡ</h1>
	<p>article要素。</p>
	<section>
		<h2>見出しＡ－Ａ</h2>
		<p>article要素の中の１つ目のセクション。</p>
	</section> 
	<section>
		<h2>見出しＡ－Ｂ</h2>
		<p>article要素の中の２つ目のセクション。</p>
	</section> 
	<section>
		<h2>見出しＡ－Ｃ</h2>
		<p>article要素の中の３つ目のセクション。</p>
	</section> 
</article>
実際の表示

見出しＡ

article要素。

見出しＡ－Ａ

article要素の中の１つ目のセクション。

見出しＡ－Ｂ

article要素の中の２つ目のセクション。

見出しＡ－Ｃ

article要素の中の３つ目のセクション。