<section>とは文章を区切るためのHTML要素である。章、節および項がそれぞれsectionに該当する。
section要素の構文を次に示す。
<section>
<!-- flow-content -->
</section>
section要素の使い方を次に示す。
<h1>深夜特急1 香港・マカオ</h1>
<section>
<h2>第一章 朝の光 発端</h2>
<p>ある朝、目を覚ました時、これはもうぐずぐずしてられない、と思ってしまったのだ。</p>
</section>
<section>
<h2>第二章 黄金宮殿 香港</h2>
<p>インドのデリーからイギリスのロンドンまで乗合いバスで行く、というのが私のささやかな主題だった。</p>
</section>
sectionが文章の構造を表すセマンティックな要素であるのに対して、divは汎用的な区切り要素である。そのため、divは単なる視覚上の装飾のために使われることも多い。
div要素はあまりにも汎用的に使われてきたため、HTML5においてsection、articleおよびnav等のセマンティックな要素が造られることになった。
section要素にはグローバル属性を指定できる。具体的には、次に示す属性である。
値 | 説明 |
---|---|
off | 自動的な大文字化を行わない。 |
on | 各文における最初の文字を自動的に大文字にする。 |
none | 自動的な大文字化を行わない。 |
sentences | 各文における最初の文字を自動的に大文字にする。 |
words | 各単語における最初の文字を自動的に大文字にする。 |
characters | すべての文字を自動的に大文字にする。 |
<section class="container">
値 | 説明 |
---|---|
true | ユーザによる編集が行える。 |
false | ユーザによる編集が行えない。 |
値 | 説明 |
---|---|
ltr | 左から右へ記述する。(日本語や英語など) |
rtol | 右から左へ記述する。(アラビア語など) |
auto | ユーザーエージェントに決定される。 |
値 | 説明 |
---|---|
true | 要素をドラッグできる。 |
false | 要素をドラッグできない。 |
<section lang="ja">
section要素の開始タグと終了タグの間には、次のフローコンテンツを含めることができる。
section要素は入れ子にできる。
<section>
<section>
<!-- flow content -->
</section>
</section>
JavaScriptからsection要素へはHTMLElementインタフェースを通じてアクセスできる。
プロパティ | 型 | 説明 |
---|---|---|
dataset | DOMStringMap | section要素のカスタムデータ属性 |
dir | DOMString | section要素のdir属性 |
innerText | DOMString | ノードに描画されるテキスト |
lang | DOMString | section要素のlang属性 |
style | CSSStyleDeclaration | section要素のstyle属性 |
title | DOMString | section要素のtitle属性 |
<section style="border-right: medium solid gray">
The quick brown fox jumps over the lazy dog.
</section>
Web Hypertext Application Technology Working Group (2021) "Sections" HTML Living Standard