<section> の使い方と解説

POINT !

<section> 要素のポイント！

<section> は「テーマ的なまとまり」を持つコンテンツの塊に使う。<article> との違いは「単体で別のコンテキストに持ち出せるか」という独立性にある。持ち出せるなら <article>、ページの文脈の中にある章・節なら <section>。
<section> には原則として見出し（<h2>〜<h6>）を含めることが強く推奨される。見出しのない <section> はアウトライン上で「無題のセクション」となり、文書構造として不完全になる。
<section> は汎用的なレイアウトラッパーではない。スタイリングだけを目的とするなら <div> を使うべき。「このコンテンツのグループに見出しが付けられるか？」が <section> を使う判断基準になる。
<section> はセクショニングコンテンツであり、見出しのアウトライン（文書の章立て）を形成する。<section> 内の <h1> は、<section> の外側の <h1> とは独立した見出しレベルとして扱われる（ただし現在のブラウザ実装は不安定なため、見出しレベルを明示するのが安全）。

概要

<section> 要素は HTML5 で導入されたセクショニングコンテンツのひとつで、「テーマ的にひとまとまりになるコンテンツの章・節」を表します。本で言えば「第1章」「第2節」にあたるような、明確なテーマを持つコンテンツグループが対象です。

<section> と <article> はよく混同されますが、区別の基準は「独立性」です。<article> は「別のサイトやRSSに持ち出しても意味が通じる」独立したコンテンツ、<section> は「現在のページやドキュメントの文脈の中で意味をなす」章・節です。ブログの記事一覧ページなら各投稿カードが <article>、そのページの「人気記事」「最新記事」などのグループが <section> になります。

<section> を使う上で最も重要な原則は「見出しを含めること」です。W3C の仕様では <section> 内に見出しを持つことが強く推奨されており、見出しのない <section> は単なる汎用グループ化要素（<div>）と変わらない、あるいはより混乱をまねく要素になります。「この <section> にどんな見出しが付くか」を考えてから使うと良いでしょう。

具体的な役割

サービスページの「特徴」「料金」「よくある質問」各セクション、ブログ記事内の「はじめに」「まとめ」などの章、LP の各ブロック（ヒーロー・機能紹介・お客様の声・CTA）など、見出しを伴うテーマ的なコンテンツのまとまりに使う。

ネスト（入れ子）のルール

📦 <section> はフローコンテンツを内包でき、<article>・<section>・<aside>・<nav> など他のセクショニング要素をネストすることも可能です。最も一般的な構成は「<h2>（見出し）+ <p> や <article> の列挙」です。<section> の中に <section> を入れて階層的な章立てを表現することも正しい使い方です。<section> 内に <header> や <footer> を配置して、セクションのメタ情報をまとめることもできます。

技術の変遷：昔の常識 vs 今の常識

TRADITION (昔)

HTML5 以前はページを章立てする際も <div class="section"> や <div class="chapter"> に頼るしかなく、見出しレベル（h1〜h6）だけが唯一の文書構造の手がかりだった。スタイリング用途と構造化用途の <div> が混在し、マークアップの可読性・保守性が低かった。

MODERN (今)

<section> によってコンテンツの章立て構造をマークアップで明示できるようになった。aria-labelledby と組み合わせることでアクセシビリティも向上し、CSS では section セレクタで章ごとのスタイリングが可能になった。<div> はあくまでスタイリング・スクリプト用の汎用要素として役割を分離できる。

主要な属性

属性名	説明
`HTMLカテゴリ`	フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
`親要素の制限`	フローコンテンツを受け入れる任意の要素
`ARIAロール`	region（aria-label/aria-labelledby がある場合）/ generic（ない場合）
`見出し推奨`	内部に <h2>〜<h6> を含めることが強く推奨される
`アウトライン`	セクショニングコンテンツとして文書アウトラインを形成する
`グローバル属性`	すべてのグローバル属性が使用可能
`HTML5 導入`	HTML5（2014年 W3C 勧告）で追加

利用例

サービスページの章立て

LP やサービスページでよく見られるセクション構成。各テーマが <section> で区切られ、それぞれに見出しが付く。

CSS Style

main { font-family: sans-serif; max-width: 600px; display: flex; flex-direction: column; gap: 0; } section { padding: 32px 28px; border-bottom: 1px solid #e2e8f0; } section:last-child { border-bottom: none; } section h2 { font-size: 20px; color: #1a1a2e; margin-bottom: 14px; padding-bottom: 8px; border-left: 4px solid #1a56db; padding-left: 12px; } section ul { padding-left: 20px; color: #334155; line-height: 2; } section p { color: #475569; line-height: 1.7; margin-bottom: 8px; } .features { background: #f8fafc; } .pricing { background: #eff6ff; } .faq { background: #f0fdf4; }

HTML Structure

<main>
  <section class="features" aria-labelledby="features-heading">
    <h2 id="features-heading">主な機能</h2>
    <ul>
      <li>AI による自動解析</li>
      <li>リアルタイムプレビュー</li>
      <li>チームコラボレーション</li>
    </ul>
  </section>

  <section class="pricing" aria-labelledby="pricing-heading">
    <h2 id="pricing-heading">料金プラン</h2>
    <p>月額 ¥980 〜。14日間無料トライアルあり。</p>
  </section>

  <section class="faq" aria-labelledby="faq-heading">
    <h2 id="faq-heading">よくある質問</h2>
    <p>Q. 無料プランはありますか？</p>
    <p>A. はい、基本機能は無料でご利用いただけます。</p>
  </section>
</main>

よくある誤用・注意点

スタイリングだけを目的として <section> を使うのは誤り。また、見出しを持たない <section> は文書構造として不完全。これらのケースでは <div> が適切。

CSS

HTML (Incorrect)

<!-- ❌ 悪い例：スタイリング目的の乱用・見出しなし -->
<section class="blue-bg"><!-- 見出しなし、意味のないセクション -->
  <p>ここをブルーにしたいだけ</p>
</section>

<!-- ✅ 良い例：テーマと見出しが伴う場合に使う -->
<section>
  <h2>お客様の声</h2>
  <p>「このツールで作業効率が3倍になりました」</p>
</section>

<!-- ✅ スタイリングだけが目的なら div -->
<div class="blue-bg">
  <p>ここをブルーにしたいだけ</p>
</div>

リファレンス統計

HTML 要素 14

CSS プロパティ 6

レイアウト・構造

ナビゲーション・リンク

<nav>

メディア・画像

インタラクティブ

メタデータ・スクリプト

<section> 要素