<section>

<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の違い

sectionが文章の構造を表すセマンティックな要素であるのに対して、divは汎用的な区切り要素である。そのため、divは単なる視覚上の装飾のために使われることも多い。

div要素はあまりにも汎用的に使われてきたため、HTML5においてsection、articleおよびnav等のセマンティックな要素が造られることになった。

属性

section要素にはグローバル属性を指定できる。具体的には、次に示す属性である。

accesskey
アクセスキーを指定する。
autocapitalize
ユーザーが入力や編集をしたとき、自動的にキャピタライズを行うかどうかを指定する。
autocapitalize属性
値 説明
off 自動的な大文字化を行わない。
on 各文における最初の文字を自動的に大文字にする。
none 自動的な大文字化を行わない。
sentences 各文における最初の文字を自動的に大文字にする。
words 各単語における最初の文字を自動的に大文字にする。
characters すべての文字を自動的に大文字にする。
class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。 
<section class="container">
contenteditable
ユーザによる編集が行えるかどうかを指定する。
contenteditable属性
値 説明
true ユーザによる編集が行える。
false ユーザによる編集が行えない。
data-*
カスタムデータ属性を指定する。
dir
テキストの方向を指定する。
dir属性
値 説明
ltr 左から右へ記述する。（日本語や英語など）
rtol 右から左へ記述する。（アラビア語など）
auto ユーザーエージェントに決定される。
draggable
要素がドラッグできるかどうかを指定する。
draggable属性
値 説明
true 要素をドラッグできる。
false 要素をドラッグできない。
id
一意な識別子を指定する。
lang
要素の言語を指定する。 
<section lang="ja">
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

内容

section要素の開始タグと終了タグの間には、次のフローコンテンツを含めることができる。

入れ子

section要素は入れ子にできる。

<section>
  <section>
    <!-- flow content -->
  </section>
</section>

JavaScript

JavaScriptからsection要素へはHTMLElementインタフェースを通じてアクセスできる。

HTMLElementインタフェースのプロパティ
プロパティ 型 説明
dataset DOMStringMap section要素のカスタムデータ属性
dir DOMString section要素のdir属性
innerText DOMString ノードに描画されるテキスト
lang DOMString section要素のlang属性
style CSSStyleDeclaration section要素のstyle属性
title DOMString section要素のtitle属性

HTMLタグ

参考文献

WHATWG. (2021). "Sections" HTML Living Standard