😺

HTML5 セクショニングの要：<section>タグの正しい使い方とルール

に公開
HTML 5
tech

はじめに

HTML5のセマンティック要素は、文書構造を検索エンジンやスクリーンリーダー（音声読み上げソフト）に正しく伝える上で非常に重要です。その中でも、コンテンツを意味的なテーマごとに区切る<section>タグは、正しく使われていないことがよくあります。

この記事では、<section>タグを使う際の厳密なルールと、<div>タグとの違いを解説します。

1. <section>タグの役割：独立したテーマの区切り

<section>は、**「独立した意味を持つコンテンツの集合体」**を表します。つまり、その中身を抜き出しても、意味が通じる一つのテーマである必要があります。

🚨 最重要ルール：見出し（h1〜h6）を必須とする

<section>タグを使う際の最も重要なルールは、そのセクションのテーマを示す見出し要素を、原則として必ず一つ以上含めることです。

見出しがないと、ブラウザや支援技術がそのセクションの内容を正しく理解できず、セクショニング要素としての意味をなしません。

✅ 良い例

<section class="p-about">
  <h2>私たちのビジョン (About Us)</h2>
  <p>私たちは「Web Entertainment Design」を目標に...</p>
</section>

<section class="p-news">
  <h3>最新のお知らせ</h3>
  <ul>
    <li>2025/10/20: 採用情報更新</li>
  </ul>
</section>

❌ 悪い例

<!-- 見出しがないため、意味的な区切りとして機能しない -->
<section class="p-wrapper">
  <p>単なるテキストです。</p>
</section>

2. <div>との使い分け：レイアウトか意味か？

セクショニングの要素を選ぶ際、多くの人が<div>と<section>の使い分けに迷います。判断基準は**「意味（セマンティクス）があるか」**です。

タグ 目的 使用例
<section> 独立した意味的な区切り 会社概要、サービス一覧、問い合わせフォーム、記事のリスト、など。
<div> 純粋なレイアウト目的 CSSで幅を制限するため（.wrapperや.inner）、Flexboxの親要素、特定のスタイル適用のため。

✅ チェックリスト：<section>を使うべきか？

以下の質問に「Yes」と答えられる場合のみ、<section>を使うのが適切です。

  1. このコンテンツに分かりやすい**見出し（タイトル）**をつけられますか？
  2. このコンテンツは、他の部分から切り離しても独立したテーマとして成立しますか？
  3. これは、単にCSSでスタイルを調整するためだけのラッパー（包み）要素ではありませんか？

3. 典型的なサイト構造における配置例

一般的なWebサイトのアウトラインでは、メインコンテンツの各ブロックが<section>になります。

<body>
  <!-- サイト共通のナビゲーションやロゴ -->
  <header>...</header>

  <!-- ページの主要コンテンツ（通常は <main> で囲む） -->
  <main>

    <!-- 独立したテーマ１：サービス紹介 -->
    <section id="service">
      <h2>サービス一覧</h2>
      <!-- ... コンテンツ ... -->
    </section>

    <!-- 独立したテーマ２：会社概要 -->
    <section id="about">
      <h2>会社概要</h2>
      <!-- ... コンテンツ ... -->
    </section>

    <!-- 独立したテーマ３：お問い合わせ -->
    <section id="contact">
      <h2>お問い合わせ</h2>
      <form>...</form>
    </section>

  </main>

  <!-- サイト共通のフッター情報 -->
  <footer>...</footer>
</body>

まとめ

<section>タグは、見出しとセットで使い、意味的な区切りを作るために使用するものです。単にCSSを適用したいだけであれば、必ず<div>を使いましょう。このルールを守ることで、よりセマンティックでアクセシビリティの高いHTML構造を実現できます。

ポイント

  • <section>には必ず見出し（h1〜h6）を含める
  • 意味的な区切りには<section>、レイアウト目的には<div>を使う
  • 独立したテーマとして成立するか確認する

Discussion