HTML の <section> 要素は、 HTML 文書の中で単独のセクション (区間) を表します。セクションを表現するより意味的に具体的な要素がない場合に使用します。必ずではありませんが、通常はセクションには見出しがあります。

例えば、ナビゲーションメニューは <nav> 要素で表しますが、検索結果の一覧や地図の表示やコントロールには具体的な要素がないので、 <section> の中に入れることができます。

メモ: 要素の内容が個別の記事をまとめたものであれば、 <article> 要素がより適しているかもしれません。

コンテンツカテゴリ フローコンテンツ, 区分コンテンツ, 知覚可能コンテンツ
許可されている内容 フローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素。ただし、 <section> 要素は <address> 要素の子孫要素として配置してはならない。
許可されている ARIA ロール alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, search, status, tabpanel
DOM インターフェイス HTMLElement

属性

この要素にはグローバル属性のみがあります。

使用上の注意

  • それぞれの <section> は識別可能であるべき、特に <section> の子要素に見出し (<h1>-<h6> 要素) を含めるべきです。
  • <section> 要素の内容が単独で配信して意味がある場合は、代わりに <article> 要素を使用してください。
  • <section> 要素を単なる汎用コンテナーとして使用しないでください。このような場合、特にスタイル付けのみの目的で区切るのは <div> の役割です。大まかに言えば、 section は文書のアウトラインに論理的に現れるものに使用してください。

例 1

section 要素を導入する前

<div>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</div>

section 要素を導入した後

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

例 2

section 要素を導入する前

<div>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</div>

section 要素を導入した後

<section>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</section>

仕様書

仕様書 状態 備考
HTML Living Standard
<section> の定義
現行の標準  
HTML 5.1
<section> の定義
勧告  
HTML5
<section> の定義
勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 5Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 11.1Safari 完全対応 4.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 11Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, SphinxKnight, yyss, ethertank
最終更新者: mfuji09,