最終更新日 2021年4月7日

section要素

ドキュメントやアプリケーションのセクションを表します。section要素のセクションは、主に内容によって区切られる各部分を意味し、通常はh1要素の見出しを中に含みます。section要素は、Flowコンテンツの記述箇所で使用できます。section要素に似た要素として、article要素やdiv要素があります。

section要素を入れ子構造にすることで、h2～h6の要素を使わずにh1要素だけを使って見出しレベルを順序付けすることもできます。ドキュメントの構成が論理的に分割されている場合などに使うと便利でしょう。

HTML5の仕様では、コンテンツ各部の集まりを統合的にまとめて扱う場合はsection要素の代わりにarticle要素を、コンテンツをスタイル化やスクリプト用に分ける場合はsection要素の代わりにdiv要素を、それぞれ使用することを推奨しています。

HTML5での変更点

・section要素は、HTML5で追加された新しい要素です。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ Sectioningコンテンツ	省略不可	Flowコンテンツを子にできる要素	Flowコンテンツ

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <h1>レギュラーメニュー</h1>
  <p>マクドエイドの厳選メニューです。</p>
  <section>
    <h1>ハンバーガー</h1>
    <p>オーストラリア産ビーフを100%使用しています。</p>
  </section>
  <section>
    <h1>チーズバーガー</h1>
    <p>まろやかでクリーミーなチーズを使用しています。</p>
  </section>
  <section>
    <h1>フィレオフィッシュ</h1>
    <p>酸味がきいたタルタルソースが白身魚とマッチしています。</p>
  </section>
</body>

参考文献：W3C HTML5「4.4.2 The section element」

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。