定義と使い方

<section>タグは文書やアプリケーションにおける一般的なセクションを示します。
このセクションは特定のテーマに基づいてまとめられたコンテンツのグループを意味し、テーマの見出しは必須ではありませんが、一般的には併用されます。

このタグは<article>、<aside>、<nav>など、セクションを示すより適切な意味を持つ要素が存在しない場合に、論理的な観点からテーマ別のコンテンツグループを示すために使用します。

使用例

  • ウェブページ内で個々のテーマを扱うセクション（例：商品ごとのセクション、紹介など）
  • スライダーにおける各スライドコンテナー
  • タブで構成されたダイアログの各タブページ
  • ホームページを紹介・ニュース・お問い合わせといったセクションに分ける場合

基本例

次に、<section>タグを使用してテーマ別のコンテンツを論理的に区分した例を示します。

HTML 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>プロジェクト紹介</title>
    </head>
    <body>
        <header>
            <h1>私たちのプロジェクト</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#section1">プロジェクト目標</a></li>
                <li><a href="#section2">進捗状況</a></li>
                <li><a href="#section3">結果および今後の計画</a></li>
            </ul>
        </nav>
        <section id="section1">
            <h2>プロジェクト目標</h2>
            <p>このセクションではプロジェクトの目的と目標について説明します。</p>
        </section>
        <section id="section2">
            <h2>進捗状況</h2>
            <p>このセクションではプロジェクトの現在の進捗状況に関する情報を提供します。</p>
        </section>
        <section id="section3">
            <h2>結果および今後の計画</h2>
            <p>このセクションではプロジェクトの結果と今後の計画を扱います。</p>
        </section>
        <footer>
            <p>© 2025 私たちのプロジェクト。全ての権利を保有しています。</p>
        </footer>
    </body>
</html>

この例では、<section>タグを使用して各テーマを独立したセクションとして区分し、各セクション内に関連するコンテンツを配置する方法を示しています。

構文上の特徴

  • <section>タグは<address>タグの子要素または子孫要素になることはできません。これは、<address>タグがセクショニングコンテンツ（sectioning content）を許可していないためです。
  • <section>タグを、それ自体に意味を持たない汎用コンテナーとして使用してはいけません。単にスタイリングを目的とする場合は、<div> タグを使用する必要があります。
  • テーマごとのセクションを定義する際は、見出しタグ（<h1>〜<h6>）を<section>タグ内で併用してください。これによりテーマの識別がしやすくなります。ただし必須というわけではありません。

<section>と<article>タグの違い

<section>と<article>タグの使用意図は混同されやすいものです。
以下では、この二つのタグの違いをまとめて比較しています。

  • <section>タグは、文書やアプリケーションにおいて論理的な観点からテーマ別のコンテンツグループを示すために使用されます。
  • 一方、<article>タグは、独立して配布したり再利用できるコンテンツをまとめる領域として使用されます。
  • 独立して配布したり再利用できるコンテンツのアイテムで構成する場合は、<article>タグの方が適した選択となる場合があります。

補足説明
<article>タグは、文書・ページ・アプリケーションまたはサイト内で、独立して配布したり再利用できるコンテンツをまとめる領域として使用されます。例えば、掲示板の投稿、ニュース記事、ブログ記事、コメントなどが挙げられます。

例

<section>タグがどのように使用されるのか、主な例を見ていきましょう。

<article>タグ内で<section>タグを使用する

<article>タグ内で<section>タグを使用することは可能です。<article>タグは独立したコンテンツのまとまりを示すために使用され、<section>タグはそのコンテンツをより論理的に区分する目的で活用できます。

次に、<article>タグ内で<section>タグを使用した簡単な例を示します。

HTML 
<article>
    <h1>最新レシピコレクション</h1>
    <p>今週のおすすめレシピをご紹介します。</p>
    <section>
        <h2>朝食</h2>
        <p>朝にぴったりの料理アイデアです。</p>
    </section>

    <section>
        <h2>昼食</h2>
        <p>昼食向けのレシピをご紹介します。</p>
    </section>

    <section>
        <h2>夕食</h2>
        <p>夕食のアイデアやレシピをご覧ください。</p>
    </section>
</article>

このように、<article>タグ内で<section>タグを使用すると、記事やコンテンツを論理的に区分して表現でき、ウェブページの意味と構造を強化するのに役立ちます。

サイドバーのウィジェットセクションとして使用

ウィジェットはサイドバー内で独立したブロックとして表示でき、各<section>タグ内で特定のウィジェットに関連するコンテンツを定義できます。これによりウェブページの構造がより論理的になり、利用者に追加情報を提供したり主要コンテンツを補完するのに役立ちます。

例えば、ウェブページのサイドバーに次のようなウィジェットを表示する場合、<aside>タグ内で<section>タグを使用します。

補足説明
<aside>タグは、ページ内の主要なコンテンツと直接的ではないものの、間接的に関連する内容で構成された独立した部分を示します。

HTML 
<aside>
    <section>
        <h2>天気ウィジェット</h2>
        <p>現在の天気情報や予報を表示します。</p>
    </section>
    <section>
        <h2>ソーシャルメディアウィジェット</h2>
        <p>最新のツイートやソーシャルメディアの更新を表示します。</p>
    </section>
    <section>
        <h2>広告ウィジェット</h2>
        <p>広告またはおすすめ商品を表示します。</p>
    </section>
</aside>

スライダーの各スライドコンテナーとして使用

スライダーはテーマやコンテンツが順番に切り替わる場合に使用され、各スライドはテーマやセクションの論理的な一部となることがあります。<section>タグを使用して各スライドを表すことができます。

例えば、ウェブページのスライダーが旅行先に関する情報を表示する場合、各スライドには特定の旅行先に関する情報を含めることができ、<section>タグでまとめて各スライドを定義できます。

HTML 
<div id="slider">
    <section>
        <h2>パリ（フランス）</h2>
        <p>パリでの素敵な旅行体験をご紹介します。</p>
        <!-- このスライドの内容 -->
    </section>
    <section>
        <h2>ローマ（イタリア）</h2>
        <p>ローマの歴史と文化を探検しましょう。</p>
        <!-- このスライドの内容 -->
    </section>
    <section>
        <h2>東京（日本）</h2>
        <p>東京での素晴らしい旅を計画しましょう。</p>
        <!-- このスライドの内容 -->
    </section>
</div>

このようにすることで、各スライドがテーマ別のコンテンツグループとして構成され、ウェブページのセマンティックな構造を向上させることができます。

関連属性

<section>専用の属性は存在しません。すべてのグローバル属性を使用できます。

技術的な文法のまとめ

sectionタグの技術的な文法まとめ
可能な親要素 <address>の子孫要素になることはできません。
暗黙的なrole属性値 見出し（<h1>~<h6>）やaria-labelledby、aria-label、titleなどのアクセシブルネームがある場合はregion、それ以外の場合はgenericとなります。
許可されているrole属性値 alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel

ブラウザ互換性

sectionタグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<section> 5 12 4 5

仕様書

sectionタグの仕様書
仕様書
<section> HTML Standard
#the-section-element

参考資料

関連項目