このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

section要素:一般的なセクションHTML5で追加

記事May 13th,2015
July 7th,2020
一般的なセクションを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

section”要素は一般的なセクションを表す要素です。セクションは通常見出しを伴う文書内の章や節などを指します。

コンテンツを一つの記事としてまとめる場合はarticle”要素が“section”要素よりも適切です。また、スタイルを適用する目的などで文脈に関係なくコンテンツの一部を囲みたい場合は“section”要素ではなくdiv”要素を使用するべきです。

他に適切な要素がある場合はその要素(nav”要素aside”要素など)を使用します。

セクショニング・コンテンツです。アウトラインを生成します。

サンプルコード

<article>
<header>
<h1>黄色いフルーツバナナ</h1>
<p>バナナについての解説。<p>
</header>

<section>
<h2>バナナの特徴</h2>
<p>
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
</p>
<section>
<h3>バナナの木</h3>
<p>
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
</p>
</section>
<section>
<h3>バナナの果実</h3>
<p>
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
</p>
</section>
</section>
<section>
<h2>バナナの産地</h2>
<p>
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
</p>
</section>
<section>
<h2>バナナの保存方法</h2>
<p>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
</p>
</section>
<section>
<h2>バナナの栄養素</h2>
<p>
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
</p>
</section>
</article>

黄色いフルーツバナナ

バナナについての解説。

バナナの特徴

「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。

バナナの木

バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。

バナナの果実

バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

バナナの産地

バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。

バナナの保存方法

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナの栄養素

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

通常章や節などの文章の階層に合わせてh1~h6”要素の見出しのランクを下げて行きますが、“section”要素で明示的にアウトラインを生成するとすべてh1”要素で見出しを表すこともできます。

<article>
<header>
<h1>果物の女王マンゴスチン</h1>
<p>マンゴスチンについての解説。<p>
</header>

<section>
<h1>マンゴスチンの特徴</h1>
<p>
「マンゴスチン」はフクギ科フクギ属の常緑高木及びその果実のことである。
</p>
<section>
<h1>マンゴスチンの木</h1>
<p>
マンゴスチンの木は7メートルから25メートル程度の直立する幹を持つ円形または円錐形の樹冠を形成する高木である。肉厚で淡桃色の花を咲かせる。
</p>
</section>
<section>
<h1>マンゴスチンの果実</h1>
<p>
マンゴスチンの果実は球形でやや硬い暗赤紫色の皮に包まれている。果肉部分は白色でミカンの房のような形をしている。
</p>
</section>
</section>
<section>
<h1>マンゴスチンの産地</h1>
<p>
マンゴスチンは主に東南アジアや南アジアで栽培され、タイが輸出国として有名である。各地に移入が試みられているが今のところ日本で栽培に成功した例はない。
</p>
</section>
<section>
<h1>果物の女王</h1>
<p>
マンゴスチンは柔らかい果肉に強い甘みと爽やかな酸味が合わさった上品な味わいが好まれ、「果物の女王」と呼ばれている。生食が一番美味であるが、劣化しやすく賞味期間は短い。
</p>
</section>
</article>

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性

仕様書

section”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<section>
定義なし

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク