section要素

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

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

要点

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

サンプルコード

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

サンプル

1つのセクション

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

見出しA

1つ目のセクション。

3つのセクション

HTMLソースコード
<section>
	<h1>見出しA</h1>
	<p>1つ目のセクション。</p>
</section> 
<section>
	<h1>見出しB</h1>
	<p>2つ目のセクション。</p>
</section> 
<section>
	<h1>見出しC</h1>
	<p>3つ目のセクション。</p>
</section> 
実際の表示

見出しA

1つ目のセクション。

見出しB

2つ目のセクション。

見出しC

3つ目のセクション。

入れ子

HTMLソースコード
<section>
	<h1>見出しA</h1>
	<p>1つ目のセクション。</p>
	<section>
		<h2>見出しA-A</h2>
		<p>1つ目のセクションの中の1つ目のセクション。</p>
		<section>
			<h3>見出しA-A-A</h3>
			<p>1つ目のセクションの中の1つ目のセクションの中の1つ目のセクション。</p>
		</section> 
		<section>
			<h3>見出しA-A-B</h3>
			<p>1つ目のセクションの中の1つ目のセクションの中の2つ目のセクション。</p>
		</section> 
	</section> 
	<section>
		<h2>見出しA-B</h2>
		<p>1つ目のセクションの中の2つ目のセクション。</p>
	</section> 
	<section>
		<h2>見出しA-C</h2>
		<p>1つ目のセクションの中の3つ目のセクション。</p>
	</section> 
</section> 
<section>
	<h1>見出しB</h1>
	<p>2つ目のセクション。</p>
</section> 
実際の表示

見出しA

1つ目のセクション。

見出しA-A

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

見出しA-A-A

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

見出しA-A-B

1つ目のセクションの中の1つ目のセクションの中の2つ目のセクション。

見出しA-B

1つ目のセクションの中の2つ目のセクション。

見出しA-C

1つ目のセクションの中の3つ目のセクション。

見出しB

2つ目のセクション。

article要素の中にsection要素

HTMLソースコード
<article>
	<h1>見出しA</h1>
	<p>article要素。</p>
	<section>
		<h2>見出しA-A</h2>
		<p>article要素の中の1つ目のセクション。</p>
	</section> 
	<section>
		<h2>見出しA-B</h2>
		<p>article要素の中の2つ目のセクション。</p>
	</section> 
	<section>
		<h2>見出しA-C</h2>
		<p>article要素の中の3つ目のセクション。</p>
	</section> 
</article> 
実際の表示

見出しA

article要素。

見出しA-A

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

見出しA-B

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

見出しA-C

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