section タグエレメント

ブロックレベルエレメント

　section タグエレメントは、ブロックレベルエレメントで複数のエレメントをグループ化する HTML タグエレメントです。

　section タグエレメントはセクショニング・コンテンツとも呼ばれ、ページ内をカテゴリーごと、任意の内容ごとに分けるためには便利なタグです。
　仕様の勧告では、セクショニング・コンテンツにはセクショニングと呼ばる <h1>-<h6> といった見出しタグがあることが期待されます。

<section id="example" class="class_section">
	<h2>カテゴリータイトル</h2>
	<p>カテゴリーごとに section エレメントを使用する例です。</p>
</section>

　<main>エレメントや<aside>エレメント内で使うことができます。

　以下は簡単な例です。 <main>エレメントと<aside>エレメントは<article>エレメントの中にあります。 後でデバイスごとにレイアウトを調整する、レスポンシブデザインに対応するためです。
　section タグエレメントは<main>エレメントや<aside>エレメントの中で内容ごとに区分するために使っています。

　ブロックレベル要素でグループ化することができるエレメントの代表的なものに<div>があります。複数のエレメントをグループ化するには<div>しかなかったためです。
　HTML5から、<header>、<footer>、<main>、<aside>が用意され、グループ化しやすくなりました。
　しかし、<header>、<footer>、<main>、<aside>にならない包括内容、または<main>や<aside>の中で内容ごとにグループ化したい場合があります。そんな場合には、<section>を使用するとよいでしょう。<div>ではその包括に意味をお持ちませんが、<section>ならば何らかの意味がある包括であることを示唆します。

　使い方としては、<main>、<aside>を横並びにレイアウトしたい場合。<main>、<aside>の中でさらに内容ごとにグループ化したい場合などです。

　<header>、<footer>、<main>、<aside>らを包括する場合は、<article>または<section>にする。<main>や<aside>の中でグループ化したい内容を<section>で分けるなどが考えられます。

　indexページにみられる、各カテゴリーのダイジェストを<section>で分けるということも考えられます。

sectionエレメントでグループ化

　<main>内のカテゴリーごとの内容を<section>でグループ分けしています。

Example