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

sectionエレメント

 <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>の中に、<div>でグループ化する内容を<section>にするなどが考えられます。

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

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

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

Example