<section> - セクション

トップ > HTMLリファレンス > <section>

概要

項目説明
形式<section>~</section>
サポートH5 / e9 / Ch5 / Fx4 / Sa4.1 / Op11.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

属性

【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
<section>
 <h1>section要素の使い方</h1>
 <p>section要素は・・・</p>
</section>
表示

section要素の使い方

section要素は・・・

関連項目

<article><nav><aside><header><footer><hgroup>

Copyright (C) 2011-2015 杜甫々
初版:2011年6月11日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/section.htm