Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<section>

<section> は HTML の要素で、文書の自立した一般的なセクション（区間）を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。

セクショニング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<section>
5
12
4
5
18
4.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<section>
  <h2>Feature Overview</h2>
  <p>This section introduces the main features.</p>
</section>
<section>
  <h2>Pricing Plans</h2>
  <p>Click here for details on each plan.</p>
</section>

ライブデモ

コンテンツのセクション分け

section 要素で見出し付きのテーマ別コンテンツを区分け。

プレビュー全画面表示

section と article の違い

section はテーマ別グループ、article は独立したコンテンツ。

プレビュー全画面表示

ネストされたセクション

section をネストして文書の階層構造を表現。

プレビュー全画面表示

実務での使いどころ

  • <section> の活用

    <section> は HTML の要素で、文書の自立した一般的なセクション（区間）を表します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク