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>

ライブデモ

Content sections

Section element in heading with. theme by content blocksplit.

プレビュー全画面表示

Section and article. Difference

Section is theme by group, article is content.

プレビュー全画面表示

Nested sections

Section nesteddocument. Hierarchy representation.

プレビュー全画面表示

実務での使いどころ

  • <section> の活用

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

注意点

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

アクセシビリティ

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

参考リンク