この記事の要点

section 要素は一般的なセクション（章・節）を表す HTML5 のセマンティック要素 使用条件: 見出し (h1-h6) を持ち、テーマで明確にまとまった内容であること article / aside / nav のいずれにも当てはまらない普通のセクションに使う 誤用注意: 単なる装飾の div の代わりに使うのは NG — 意味的なまとまりがあるときだけ スクリーンリーダーは Region ランドマークとして認識 (aria-labelledby との併用推奨)

section 要素とは

section 要素は HTML5 で追加されたセクショニング要素で、文書内の一般的なセクション（章・節）を表します。本の章、ニュースサイトの各カテゴリブロック、フォームのステップなど、「テーマでまとまった内容」を意味づけるときに使います。

基本構文

<section>
  <h2>会社概要</h2>
  <p>当社は2010年に設立され、Web 開発を中心に...</p>
</section>

<section>
  <h2>サービス紹介</h2>
  <p>主なサービスは以下の通りです...</p>
</section>

使用条件: 見出し必須

HTML5 仕様上、section は見出し (h1-h6) を持つのが推奨されています。見出しなしで使うと意味づけが弱くなります。

<!-- OK: 見出しあり -->
<section>
  <h2>料金プラン</h2>
  <p>...</p>
</section>

<!-- NG: 見出しなしで section を使う意味がない -->
<section>
  <p>...</p>
</section>

article / aside / nav との違い

HTML5 のセクショニング要素は 4 種類あります。用途が決まっているものはそれぞれの専用要素を使い、それ以外を section にします。

要素	意味	典型用途
article	独立した記事	ブログ記事 / ニュース / 商品ページ
aside	本文の補足	サイドバー / 関連情報 / プルクオート
nav	ナビゲーション	メニュー / 目次 / パンくず
section	一般的なセクション	章・節・カテゴリ別ブロック

使用例

1. 記事内の章分け

<article>
  <h1>JavaScript 入門</h1>

  <section>
    <h2>変数と型</h2>
    <p>JavaScript には var, let, const の 3 種類の変数宣言があります...</p>
  </section>

  <section>
    <h2>関数</h2>
    <p>関数宣言と関数式の違いは...</p>
  </section>

  <section>
    <h2>非同期処理</h2>
    <p>Promise と async/await を使うと...</p>
  </section>
</article>

2. トップページのカテゴリブロック

<main>
  <section>
    <h2>新着商品</h2>
    <div class="product-grid">...</div>
  </section>

  <section>
    <h2>人気ランキング</h2>
    <ol>...</ol>
  </section>

  <section>
    <h2>お知らせ</h2>
    <ul>...</ul>
  </section>
</main>

3. ステップ式フォーム

<form>
  <section aria-labelledby="step1-title">
    <h2 id="step1-title">ステップ 1: お客様情報</h2>
    <label>氏名 <input type="text" name="name"></label>
  </section>

  <section aria-labelledby="step2-title">
    <h2 id="step2-title">ステップ 2: 配送先</h2>
    <label>住所 <input type="text" name="address"></label>
  </section>
</form>

誤用パターン

section は意味的なまとまりがあるときだけ使います。スタイリング目的の div 代わりに使うのは誤りです。

誤用	正しい要素
単なる装飾用ラッパー	div
独立した記事	article
本文の補足	aside
ナビゲーション	nav
ページ全体のヘッダー	header
ページ全体のフッター	footer

見出しレベルの扱い

HTML5 ではsection ごとに見出しレベルがリセットされる「アウトラインアルゴリズム」が提案されていましたが、主要ブラウザは未実装です。実用上は明示的に h1 → h2 → h3 と階層を作るのが安全です。

<!-- 推奨: 明示的な階層 -->
<article>
  <h1>記事タイトル</h1>
  <section>
    <h2>章タイトル</h2>
    <section>
      <h3>節タイトル</h3>
    </section>
  </section>
</article>

アクセシビリティ

• section はアクセシブル名がある場合のみ「Region ランドマーク」として認識される
• aria-labelledby で見出しと結びつけると識別しやすい
• section が多すぎると逆にナビゲーションが混乱する — 意味のある区分に絞る

<section aria-labelledby="news-title">
  <h2 id="news-title">お知らせ</h2>
  <ul>...</ul>
</section>

FAQ

Q: section と div の使い分け
A: 見出しを持ち、テーマでまとまっているなら section。スタイル目的だけなら div。

Q: section の中に article を入れていい？
A: OK。例: ニュースサイトでカテゴリ section の中に記事 article を複数並べる構成。

Q: 見出しなしで section を使うと？
A: 仕様上は使えるが、アクセシビリティ上意味が伝わらない。div で十分なケースが多い。

Q: ランディングページの各ブロックを全部 section にしていい？
A: ヒーロー / 機能紹介 / 料金 / お問い合わせのようにテーマでまとまっているブロックならOK。各ブロックに見出しを付ける。

Q: section と article をネストする深さに制限は？
A: 仕様上の制限なし。実用上は2〜3 段に収めるのが読みやすい。深くなりすぎると意味づけが伝わりにくくなる。

ランディングページでの典型例

<main>
  <section aria-labelledby="hero-title">
    <h1 id="hero-title">最強の業務効率化ツール</h1>
    <p>3 分で導入完了。今すぐ無料トライアル。</p>
  </section>

  <section aria-labelledby="features-title">
    <h2 id="features-title">機能紹介</h2>
    <article>
      <h3>機能1: 自動化</h3>
      <p>...</p>
    </article>
    <article>
      <h3>機能2: 分析</h3>
      <p>...</p>
    </article>
  </section>

  <section aria-labelledby="pricing-title">
    <h2 id="pricing-title">料金プラン</h2>
    <table>...</table>
  </section>

  <section aria-labelledby="faq-title">
    <h2 id="faq-title">よくある質問</h2>
    <dl>...</dl>
  </section>
</main>

このようにテーマ単位で section を切ると、スクリーンリーダーで「ランドマーク間を飛ばし読み」できるようになり、検索エンジンも文書構造を理解しやすくなります。

関連記事

• article要素
• aside要素
• nav要素