備忘録的プログラミングリファレンス

<section>エレメント

 <section>エレメントは、ブロックレベル要素で複数のエレメントをグループ化するエレメントです。必ず使わなければならないわけではありません。
 <main>エレメントや<aside>エレメント内で使うことができます。

 以下は簡単な例です。 <main>エレメントと<aside>エレメントは<article>エレメントの中にあります。 後でデバイスごとにレイアウトを調整することに使えるからです。
 <section>エレメントは<main>エレメントや<aside>エレメントの中で内容ごとに区分するために使っています。

<section>例

 ブロックレベル要素でグループ化することができるエレメントの代表的なものに<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