【HTML】sectionタグとは？div・article・mainとの違いを初心者向けにわかりやすく解説

section タグを学び始めると、初心者の方はかなり高い確率で「div と何が違うの？」「見た目が同じなら使わなくてもよいのでは？」と迷います。これは自然な反応です。

なぜなら、sectionタグは label のように画面上の見え方が大きく変わるタグではない からです。

そこで今回は、定義から入るのではなく、まず「1ページの中で section をどこに使うのか」を実例で見てから意味を整理します。sectionタグは、見た目を装飾するためのタグではなく、ページの中にある話題の区切りを表すためのタグです。

まず見てください：section は 1 ページの中の話題ごとに使う

下の画像は、サービス紹介ページをイメージした例です。ページ全体の主内容があり、その中に「特徴」「料金プラン」「よくある質問」といった話題のまとまりが並んでいます。このような 同じページの中で話題が切り替わる単位 を section と考えると、かなり分かりやすくなります。

この画像で見てほしいのは、section が「見た目の箱」ではなく「話題の単位」を表している点です。ページ全体は main のイメージで、その中に「特徴」「料金プラン」「FAQ」など、1つのテーマとして読めるまとまりが入っています。section は、このまとまりごとに「ここからここまでが同じ話題です」と示すために使います。

• ページ全体の主内容は main で考える
• その中にある話題ごとの区切りが section
• 各 section には見出しがあると、何のまとまりかが一目で伝わる

結論：sectionタグは 1 ページ内の話題のまとまりを表すタグ

結論からいうと、sectionタグとは、文書やページの中にある「意味のある話題のまとまり」を表すためのタグです。特徴、料金、よくある質問、概要、手順、注意点のように、1つのテーマとして読める単位を分けたいときに向いています。

観点	sectionタグの考え方
役割	ページの中の話題ごとのまとまりを示す
相性がよいもの	見出し、説明文、箇条書き、カード群など
向いている場面	サービス紹介ページ、記事本文、会社紹介ページ、FAQ構成など

つまり、sectionタグは「見た目を整えるための箱」ではなく、ページの内容を章や節のように分けるためのタグです。

前提：section は見た目を変えるタグではないので、初心者は迷いやすい

sectionタグが分かりにくい理由は、使ってもブラウザ上の見た目が劇的に変わるわけではないからです。<div> で囲んでも、<section> で囲んでも、CSS を当てなければ表示結果はかなり似ています。

だから初心者のうちは、「見た目が同じなら div でよいのでは？」と感じやすいです。ただし HTML では、見た目だけでなく その部分が何を表しているか も大切です。MDN でも、section は一般的なセクションを表す要素で、スタイル用ラッパーに過ぎないなら div を使うべきだと説明されています。

つまり section を理解するコツは、「見た目で違いを探すこと」ではなく、「この部分は同じ話題として読めるまとまりか」を考えることです。

基本の書き方は、見出し付きのまとまりを section で囲む形

もっとも基本的で分かりやすい書き方は、見出しと本文を1つのまとまりとして section で囲む方法です。サービス紹介ページや記事本文の一部をイメージすると自然に理解できます。

<main>
  <section>
    <h2>特徴</h2>
    <p>このサービスの特徴を紹介します。</p>
  </section>

  <section>
    <h2>料金プラン</h2>
    <p>月額料金や無料プランを説明します。</p>
  </section>

  <section>
    <h2>よくある質問</h2>
    <p>導入前によくある質問をまとめます。</p>
  </section>
</main>

この例では、ページ全体の主内容が main で、その中に3つの話題のまとまりがあります。各まとまりは、それぞれ独立した話題として読めるので section を使うのが自然です。見出しが入っているので、「このまとまりは何について書いているか」もすぐ分かります。

MDN でも、section には少数の例外を除いて見出しを置くよう案内されています。初心者のうちは、section を使うなら見出しもセットで考えると覚えておくと失敗しにくいです。

div・article・main との違いをページの役割で整理すると分かりやすい

sectionタグが難しく感じる最大の理由は、似たタグが近くにあるからです。ここは「見た目」ではなく「役割」で分けると整理しやすくなります。

タグ	向いている役割	初心者向けの覚え方
main	ページ全体の主内容	1ページの中心になる中身全体
section	ページ内の話題ごとのまとまり	特徴、料金、概要、FAQ のような区切り
article	それ単体で完結する内容	ブログ記事1本、ニュース1件、投稿カード1件
div	意味を持たないグループ化やレイアウト	見た目や配置のための箱

たとえばブログ記事ページなら、記事本文全体が main の中にあり、その中に「概要」「手順」「注意点」といった section が入るイメージです。逆に、ブログ記事1本そのものを表したいなら article が向いています。横並びのレイアウトや装飾のために囲むだけなら div のほうが自然です。

迷ったときは、次のように考えるとかなり整理しやすいです。1ページの中の話題なら section、単体で完結する記事なら article、見た目のためだけなら div です。

section を使うと自然な場面

sectionタグは抽象的に見えますが、実際にはかなり身近な場面で使いやすいタグです。特に次のようなページでは、section の考え方がそのまま活きます。

• サービス紹介ページの「特徴」「料金」「導入事例」「よくある質問」
• 会社紹介ページの「事業内容」「実績」「採用情報」「お問い合わせ案内」
• ブログ記事の「概要」「手順」「注意点」「まとめ」
• ドキュメントページの「前提」「設定方法」「確認方法」

共通しているのは、どれも「1ページの中に複数の話題がある」ことです。section は、こうしたページを意味のある単位に分けて考えるときにとても役立ちます。

逆に、単なるカードの横並びや余白調整のために囲むだけなら、section より div のほうが自然です。意味ではなくレイアウトが目的だからです。

よくあるミスと迷いどころ

• 見た目の囲みとしてだけ section を使っている
• 何の話題か説明できないブロックまで section にしている
• 独立した記事なのに section だけで済ませている
• 見出しのない section を大量に並べて、まとまりの意味が見えにくくなっている

一番大切なのは、「この部分は何のまとまりですか？」と聞かれたときに答えられることです。答えられるなら section の可能性がありますし、答えられないなら div のほうが自然なことが多いです。

また、MDN では section よりも具体的な意味を持つ要素があるなら、そちらを優先すると説明されています。たとえばページの主内容なら main、独立した記事なら article、ナビゲーションなら nav です。section は便利ですが、何でも section にすればよいわけではありません。

まとめ

sectionタグは派手なタグではありませんが、セマンティックHTMLを理解するうえでとても大事です。まずは「1ページの中で話題が変わる場所を区切るタグ」と覚え、サービス紹介ページや記事本文の構成を section の視点で見てみると、使いどころがかなり掴みやすくなります。