HTML <section> 要素は、HTML ドキュメント内に含まれている、機能的に独立したセクションを表します。一般的には見出しを伴っており、セクションを表すための、より具体的なセマンティック要素は持ちません。

コンテンツカテゴリー フローコンテンツセクショニングコンテンツ、パルパブルコンテンツ
許可された内容 フローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツを受け入れるすべての要素。ただし、<section> 要素は <address> 要素の子孫要素として配置してはならない。
許可された ARIA ロール alertalertdialogapplicationbannercomplementarycontentinfodialogdocumentfeedlogmainmarqueenavigationsearchstatustabpanel
DOM インターフェイス HTMLElement

属性

この要素はすべての HTML 要素が持つ グローバル属性 以外の属性を持ちません。

使用上の注意

  • それぞれの <section> は識別可能であるべき、特に <section> の子要素に見出し (<h1>-<h6> 要素) を含めるべきです。
  • <section> 要素の内容が単独で意味をなす集合である場合、section 要素より <article> 要素の使用がより適しているといえます。
    【訳注: 例えばニュースサイトにおいての「ひとつの記事とその見出しが形成するアウトライン」などが、正に 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> の定義
勧告  

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート5 有り4911.14.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基本サポート 有り 有り 有り49114.2

関連情報

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

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