section タグエレメント
ブロックレベルエレメント
section タグエレメントは、ブロックレベルエレメントで複数のエレメントをグループ化する HTML タグエレメントです。
section タグエレメントはセクショニング・コンテンツとも呼ばれ、ページ内をカテゴリーごと、任意の内容ごとに分けるためには便利なタグです。
仕様の勧告では、セクショニング・コンテンツにはセクショニングと呼ばる <h1>-<h6> といった見出しタグがあることが期待されます。
<section id="example" class="class_section"> <h2>カテゴリータイトル</h2> <p>カテゴリーごとに section エレメントを使用する例です。</p> </section>
- ad -
以下は簡単な例です。
<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
- ad -