webmas.jp

<section> 要素は単独の区間（セクション）であることを示します。

分類

フローコンテンツ、フレージングコンテンツ、知覚可能コンテンツ

内包できるもの

フローコンテンツ

属性

グローバル属性のみ

サンプル

通常 <section> を使用する場合最初の子要素は見出しから始まります。逆に考えれば見出しがつく部分には <section> 要素を使用することが望ましいでしょう。ただし <section> 以外に適切な要素が存在しないことが条件となります。

一例として、ヘッダーやフッターを除いた記事本文（そのページのメインコンテンツ）を <article> で囲み、その中に小見出しを付ける場合に <section> を使うという方法があります。

新たに <section> を開始し、階層を下げた場合はそれに合わせ見出しタグも <h1> ～ <h6> を使い分けることが理想的です。詳しくは <h1> ～ <h6> を参照してください。

<article>
<h2>記事見出し</h2>
<p>記事本文</p>

<section>
	<h3>セクション見出し</h3>
	<p>セクション本文</p>

	<section>
		<h4>セクション見出し</h4>
		<p>セクション本文</p>
	</section>
</section>

<section>
	<h3>セクション見出し</h3>
	<p>セクション本文</p>
</section>
</article>

注意点

• デザイン、レイアウト、スクリプト目的で特定の範囲をグループ化する場合は <div> を使用します。
• その範囲を切り取って独立したコンテンツとして成り立つ範囲の場合は <article> を使用します。（いわゆるブログの記事本文など）
• その範囲がヘッダーなら <header> を使用します。
• その範囲がメインコンテンツなら <main> を使用します。
• その範囲がフッターなら <footer> を使用します。
• その範囲がナビゲーションなら <nav> を使用します。
• その範囲が補足的コンテンツなら <aside> を使用します。