目次
- sectionタグとは？
- sectionに最低限必要なのは「見出し（h2〜）」
- section の基本構造
- section を使うべき場面
- ① ページをテーマごとに分けたいとき
- ② 会社情報の区切り
- ③ サービス内容をカテゴライズしたいとき
- section を使わない方がよい場面
- 単なる見た目の箱として使う場合
- article・nav など明確に役割があるタグの代わりにする
- 見出しがない section
- section と article の違い（よくある混乱ポイント）
- section と div の違い
- SEOにおけるsectionの役割
- ① 文章構造がGoogleに正しく伝わる
- ② 長文ページでの情報整理に有利
- ③ 見出しとの整合性で評価が上がる
- section の実務的な使い方（コード例）
- トップページ構成例
- section と main の関係
- section を使うときのチェックリスト
- まとめ
sectionタグとは？
<section> は 「意味を持ったひとまとまりのセクション」 を表すセマンティック要素です。
ポイントは “まとまり” と “見出し”。
sectionは次のような「テーマごとの区切り」に使います。
- サービス紹介
- 料金プラン
- よくある質問
- 会社概要
- 1日の流れ
sectionに最低限必要なのは「見出し（h2〜）」
section は「区切り」なので、内容を説明する見出しが必須です。
section の基本構造
もっともシンプルな section は次の形です。
<section>
<h2>サービス紹介</h2>
<p>当社のサービスをご紹介します。</p>
</section>見出しがあるだけでGoogleもスクリーンリーダーも
「ここが1つのまとまりなんだな」と理解できます。
section を使うべき場面
① ページをテーマごとに分けたいとき
例：トップページの構成
- ヒーローエリア
- サービス紹介
- 実績
- お客様の声
- アクセス
- フッター前のCTA
トップページは section の宝庫です。
② 会社情報の区切り
<section>
<h2>会社概要</h2>
<p>所在地：〇〇</p>
</section>③ サービス内容をカテゴライズしたいとき
<section>
<h2>個別支援</h2>
<p>マンツーマンで支援を行います。</p>
</section>
<section>
<h2>グループ活動</h2>
<p>集団でのコミュニケーションを促します。</p>
</section>section を使わない方がよい場面
単なる見た目の箱として使う場合
<section class="box">…</section> <!-- NG -->意味のない container として使うのは誤用です。
その場合は <div> を使いましょう。
article・nav など明確に役割があるタグの代わりにする
- 記事 → article
- ナビゲーション → nav
- 補足情報 → aside
section は「汎用の意味ブロック」なので “万能” ではありません。
見出しがない section
section は「区切り」なので、必ず見出しが必要です。
<section>
<!-- NG：見出しがない -->
<p>サービス説明……</p>
</section>section と article の違い（よくある混乱ポイント）
| タグ | 役割 | 独立性 | 典型例 |
|---|---|---|---|
| section | ページ内の“意味的なまとまり” | △ | 料金・サービス紹介 |
| article | 独立したコンテンツ | ◎ | ブログ記事・ニュース |
| div | 見た目用の箱 | ✕ | レイアウト調整 |
以下のように覚えると理解しやすいです。
- sectionは「ページ内の部屋」
- articleは「外に持ち出せる記事」
section と div の違い
| 項目 | section | div |
|---|---|---|
| 意味 | ある（セマンティック） | ない |
| 必要なもの | 見出し | なし |
| 検索エンジンへの意味伝達 | 強い | 弱い |
| 適した用途 | 内容の区切り | デザインの箱 |
SEOにおけるsectionの役割
① 文章構造がGoogleに正しく伝わる
見出し（h2〜h6）とセットで使うと、
Googleがページを読み取る際の「構造」が明確になります。
② 長文ページでの情報整理に有利
サービス紹介ページやLP（ランディングページ）で
sectionを適切に使うと、
Googleが内容を理解しやすくなります。
③ 見出しとの整合性で評価が上がる
section × h2（セクションタイトル）は
SEOとアクセシビリティの基本パターンです。
section の実務的な使い方（コード例）
トップページ構成例
<section class="hero">
<h2>私たちについて</h2>
<p>私たちは〜</p>
</section>
<section class="service">
<h2>サービス紹介</h2>
<p>サービス内容の概要です。</p>
</section>
<section class="contact">
<h2>お問い合わせ</h2>
<p>お気軽にお問い合わせください。</p>
</section>section と main の関係
<main>
<section>
<h2>サービス紹介</h2>
<p>〜</p>
</section>
</main>- main は “ページの主内容” の大枠
- section は “その中の区切り”
main の中に複数 section を入れるのが自然です。
section を使うときのチェックリスト
- セクションタイトル（h2〜h6）はあるか
- 内容が1つのテーマにまとまっているか
- article・nav では代用できないセクションか
- 区切りとして適切な範囲か
- 意味ではなく見た目目的になっていないか
まとめ
- section＝「ページ内の意味的な区切り」
- 見出し（h2〜）とセットで使うのが基本
- articleは独立コンテンツ、divは見た目の箱
- 長いページ・トップページで特に役立つ
- SEO的にも情報構造が明確になり有利
- 見た目目的で section を使うのはNG
section を正しく使うと
“読みやすく、伝わりやすく、SEOにも強い” ページになります。