セクション要素（section）の仕様と使い方

カテゴリ：HTML5編

section要素の概要

section要素は文書をテーマ別にブロック分けする際に使用します。
各セクション内には通常、見出しを設置し、そのセクション（章）の内容を表すように構成します。
なお、文書のセクション分け以外の目的（デザインなど）でブロック分けする場合はdiv要素を使用します。
また、Webシンジケートを目的としたブロック分けの場合はarticle要素を使用します。

一般的な構成例

一般的には、以下のようにarticle要素内の記事をブロック分けする場合になどに使用します。

典型的なsection要素の構成例）

        <article>
            <h1>見出し</h1>
            <section>
                <h2>見出し</h2>
                本文
            </section>
            <section>
                <h2>見出し</h2>
                本文
            </section>
            <section>
                <h2>見出し</h2>
                本文
            </section>
        </article>

section要素の利点

文書内の異なる章をsection要素で明示的に区切ることで、1つの記事を分割でき再利用性を高められます。例えばプログラムである記事の特定のセクションのみを抜き出して表示したり、セクション単位で文書を加工しやすくなります。

W3Cによるsection要素の説明

section要素は、文書またはアプリケーションの総称セクションを表します。 この文脈では、セクションは、コンテンツをテーマ別にグループ化したもので、通常は見出しが付いています。

sectionの例としては、章、タブ付きダイアログボックス内のさまざまなタブ付きページ、または論文の番号付きセクションなどがあります。 Webサイトのホームページは、紹介、ニュース項目、および連絡先情報のセクションに分割できます。

要素の内容をシンジケートするのが理にかなっている場合は、section要素の代わりにarticle要素を使用することをお勧めします。

section要素は一般的なコンテナ要素ではありません。 要素がスタイル設定の目的やスクリプト作成の便宜のために必要な場合は、代わりにdiv要素を使用することをお勧めします。 原則として、section要素は、要素の内容がドキュメントのアウトラインに明示的に記載されている場合にのみ適切であるということです。

公開日時：2019年06月10日 14:56:41