section要素汎用的なセクション
section要素の概要SUMMARY OF ELEMENT
HTML5における<section>要素は、そのHTMLページの中の1つの「セクション」であることを表す要素です。
セクションとは、コンテンツのまとまりをグループ分けしたブロックであり、WEBページで考えると、「ここは前置きのセクション」「ここは解説のセクション」「ここはまとめのセクション」といった使い方ができます。また、例えば小説などでいうと、節・章・項などが該当するでしょう。
<section>要素には（必須ではないですが）原則として見出し要素<h1>～<h6>が伴います。
前述の例で言えば、各セクションに「〇〇について前置きです」「〇〇の解説です」「〇〇のまとめです」であったり、「1節〇〇〇」「1節：2章△△△」「1節：2章：3項□□□」などの見出しが付くと想定できます。
また、<section>は、あくまで汎用的なセクションを生成するものですので、記事や、ナビゲーションなど、明確に意味を持つコンテンツを作成する場合にはsectionではなく、それぞれに応じ<article>や、<nav>などを使うようにしましょう。
section要素の利用例USAGE EXAMPLE FOR ELEMENT
要素の利用例を実際のコードを見ながら覚えていきましょう。
簡単なCSSでデザインをしているものもありますが、CSSの詳細はCSSリファレンスをご覧ください。
section要素の基本的な利用例ここでは、<section>の具体的な利用例を見ていきましょう。
まずは、一番基本的な書き方として見出しと本文を伴った例です。
<body>
<section class="class-name" id="id-name">
<h1>1つ目のコンテンツ</h1>
<p>ここに1つ目のコンテンツの本文が入ります...</p>
</section>
<section>
<h1>1つ目のコンテンツ</h1>
<p>ここに2つ目のコンテンツの本文が入ります......</p>
</section>
</body>
サンプル結果表示
section要素を入れ子で階層を生成次に、<section>を入れ子にして、セクションの階層を作ってみましょう。
階層に合わせて見出しも<h1>→<h2>→<h3>と変えてみます。
<section>
<h1>1階層目コンテンツ</h1>
<p>ここに1階層目のコンテンツの本文が入ります...</p>
<section>
<h2>2階層目のコンテンツ</h2>
<p>ここに2階層目のコンテンツの本文が入ります...</p>
<section>
<h3>3階層目のコンテンツ</h3>
<p>ここに3階層目のコンテンツの本文が入ります...</p>
</section>
</section>
</section>
サンプル結果表示
body要素直下にh1見出しを付け、以下階層を生成<body>はセクショニングルートと呼ばれる特別なカテゴリーに属し、ルートセクション（最上位階層セクション）となります。もちろん見出しを付けることも可能です。
それ踏まえ、階層に合わせて見出しも<h1>→<h2>→<h3>→<h4>と変えてみます。
h1-h6のページで詳しく解説しますが、階層によって見出しのフォントサイズが異なることがわかると思います。
<body>
<h1>ページのメインタイトル</h1>
<section>
<h2>1階層目の見出し</h2>
<p>ここに1階層目のコンテンツの本文が入ります...</p>
<section>
<h3>2階層目の見出し</h3>
<p>ここに2階層目のコンテンツの本文が入ります...</p>
<section>
<h4>3階層目の見出し</h4>
<p>ここに3階層目のコンテンツの本文が入ります...</p>
</section>
</section>
</section>
</body>
サンプル結果表示
sectionの誤った使い方です。<section>要素は汎用的なセクションを生成するもので、それ自体に明確な意味付けを持ちません。
次の例ではナビゲーションや本文の記事をsectionタグで囲んでいます。こういった場合はsectionではなく、それぞれ<nav>や<article>を使うようにしてみましょう。
<section> <!-- ここはnavを使うべき -->
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</section>
<section> <!-- ここはarticleを使うべき -->
<h1>記事のタイトル</h1>
<p>記事などの独立したコンテンツにはsctionではなく、articleタグを使う...</p>
</section>
サンプル結果表示
section要素の定義DEFINITIONS OF ELEMENT
section要素に関連するページRELATED PAGE OF section ELEMENT