<section> - セクション

項目	説明
形式	<section>～</section>
サポート	H5+ / Fx4+ / Op11.1+ / Ch5+ / Sa4.1+
タグの省略	開始タグ：必須、終了タグ：必須
包含可能要素	ブロック要素 / インライン要素

HTML5 で新たに追加された要素で、一般的なセクション(章)を記述します。

セクションの中では、セクションの外とは独立したアウトラインを形成します。例えば、下記のような文書をケースに説明します。

<h1>AAA</h1>
<p>aaa...</p>
<h2>BBB</h2>
<p>bbb...</p>
<h2>CCC</h2>
<p>ccc...</p>

これを、sectionで表現すると次のようになります。

<section>
  <h1>AAA</h1>
  <p>aaa...</p>
  <section>
    <h2>BBB</h2>
    <p>bbb...</p>
  </section>
  <section>
    <h2>CCC</h2>
    <p>ccc...</p>
  </section>
</section>

セクションの中と外はアウトラインが独立しているため、セクションの中の h2 を h1 で表記してもかまいません。

<section>
  <h1>AAA</h1>
  <p>aaa...</p>
  <section>
    <h1>BBB</h1>
    <p>bbb...</p>
  </section>
  <section>
    <h1>CCC</h1>
    <p>ccc...</p>
  </section>
</section>

これを、Google Chrome の HTML5 Outliner などの HTML5 アウトライン表示ツールで表示すると下記の様に、BBB や CCC は、AAAセクションの子セクションになります。

1. AAA
   1. BBB
   2. CCC

【一般属性】

属性	意味
class=class	H5+。クラスを指定します。
id=id	H5+。IDを指定します。
style=style	H5+。スタイルシートを指定します。
title=title	H5+。タイトルを指定します。
dir=dir	H5+。文字の表示方向を指定します。
lang=lang	H5+。言語を指定します。
accesskey=key	H5+。アクセスキーを指定します。
tabindex=n	H5+。タブインデックスを指定します。
contenteditable=bool	H5+。要素を編集可能にします。
contextmenu=id	H5+。コンテキストメニューを指定します。
draggable=bool	H5+。ドラッグを可能にします。
dropzone=value	H5+。ドロップを可能にします。
hidden	H5+。要素を非表示にします。
spellcheck=bool	H5+。スペルをチェックします。

HTMLソース
<section> <h1>section要素の使い方</h1> <p>section要素は・・・</p> </section>

ブラウザ表示例
section要素の使い方 section要素は・・・

<section> - セクション

■ 概要

■ 説明

■ 属性

■ 使用例

section要素の使い方

■ 関連項目