HTMLの <section> タグ

<section>とは文章を区切るためのHTML要素である。章、節および項がそれぞれsectionに該当する。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。section 要素の終了タグは省略できない。

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

<SECTION>
  <!-- flow-content -->
</SECTION>

sectionとdivの違い

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

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

コンテンツモデル

aside要素の開始タグと終了タグの間にはフロー・コンテンツを含めることができる。具体的には、以下に示す要素である。

• テキスト
• <a>
• <abbr>
• <address>
• <article>
• <aside>
• <audio>
• <b>
• <bdi>
• <bdo>
• <blockquote>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <details>
• <dfn>
• <div>
• <dl>
• <em>
• <embed>
• <fieldset>
• <figure>
• <footer>
• <form>
• <h1>
• <h2>
• <h3>
• <h4>
• <h5>
• <h6>
• <header>
• <hgroup>
• <hr>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <main>
• <map>
• <mark>
• <math>
• <menu>
• <meter>
• <nav>
• <noscript>
• <object>
• <ol>
• <output>
• <p>
• <picture>
• <pre>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <section>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <table>
• <template>
• <textarea>
• <time>
• <ul>
• <var>
• <video>
• <wbr>

入れ子

section 要素の中に、さらに section 要素を入れることができる。つまり、入れ子にすることができる。

<section>
  <h1>深夜特急1 香港・マカオ</h1>
  <section>
    <h2>第一章 朝の光 発端</h2>
    <p>ある朝、目を覚ました時、これはもうぐずぐずしてられない、と思ってしまったのだ。</p>
  </section>
  <section>
    <h2>第二章 黄金宮殿 香港</h2>
    <p>インドのデリーからイギリスのロンドンまで乗合いバスで行く、というのが私のささやかな主題だった。</p>
  </section>
</section>

属性

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">

ondblclick

要素がダブルクリックされたときに実行するJavaScriptを指定する。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

JavaScript

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

CSS

border-right

右の境界線の太さ、種類、色を指定するCSSプロパティ

<section style="border-right: medium solid gray">
  The quick brown fox jumps over the lazy dog.
</section>

The quick brown fox jumps over the lazy dog.

参考文献

Web Hypertext Application Technology Working Group (2023) Sections HTML Living Standard