HTMLのsectionタグとは？divタグとの違いや使い方・注意点を初心者向けに解説

この記事ではHTMLのsectionタグを使う方法について解説します！

sectionタグは、HTML5以降のコーディングでよく登場するタグです。しかし、見た目を変えるタグではないため「divタグと何が違うの？」「どこで使えばいいの？」と迷う初心者の方も多いのではないでしょうか。

今回の記事では、

sectionタグとは
sectionタグを使用する目的・使い方
sectionタグとdivタグ・articleタグとの違い
sectionタグを使う時の注意点

について解説していきます。

HTMLのsectionタグとは

sectionタグは、Webページの中で1つのテーマを持つ範囲を表すHTMLタグです。たとえば、サービス紹介、料金案内、よくある質問、学習カリキュラムの説明など、ページ内で内容の区切りがはっきりしている部分に使用します。

sectionタグは、単体で見た目を変えるタグではありません。CSSを当てなければ、ブラウザ上の表示はdivタグで囲んだ場合と大きく変わらないこともあります。

しかし、sectionタグには「この範囲は1つの章・セクションです」という意味があります。見た目ではなく、HTMLの構造を検索エンジンやブラウザ、スクリーンリーダーへ伝えるために使うタグだと考えるとわかりやすいです。

<section>
  <h2>サービス内容</h2>
  <p>提供しているサービスの概要を紹介します。</p>
</section>

この例では、「サービス内容」という見出しに対応する範囲をsectionタグで囲んでいます。

sectionタグはデザイン用の箱ではなく、意味のある章や話題のまとまりを表すためのタグです。

HTMLの講義動画を無料で見れる入門講座
HTMLの学習に迷った方はまずはHTML入門講座をチェックしましょう！
HTMLとは何かといった話から、問題集、一部講義動画の視聴もすべて無料で利用できます。
関連記事：「HTMLタグ一覧｜コピペで使える目的別リファレンス」

HTMLのsectionタグを使用する目的・使い方

sectionタグを使用する目的は、ページ内の内容を意味のあるまとまりに分けることです。Webページは、1つの文章がただ続いているのではなく、複数のテーマやブロックで構成されていることが多くあります。

sectionタグを使用する目的は大きく2つです。

ページ内のテーマを分ける
HTMLの構造をわかりやすくする

ページ内のテーマを分ける

sectionタグは、Webページ内のテーマごとのまとまりを作るために使用されます。

たとえば、サービスサイトのトップページで「特徴」「料金プラン」「よくある質問」を分けたい場合は、以下のように書けます。

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

  <section>
    <h2>料金プラン</h2>
    <p>料金の詳細を紹介します。</p>
  </section>

  <section>
    <h2>よくある質問</h2>
    <p>よくある質問と回答を掲載します。</p>
  </section>
</main>

このようにsectionタグで区切ることで、ページ内の内容がテーマごとに整理されます。

HTMLの構造をわかりやすくする

sectionタグを使うと、HTMLを読んだときに「ここからここまでが同じテーマの内容」と判断しやすくなります。

実務では、sectionタグを使うか迷ったときに「その範囲に自然な見出しを付けられるか」で判断することが多いです。

<section class="faq">
  <h2>よくある質問</h2>
  <dl>
    <dt>未経験でも学べますか？</dt>
    <dd>基礎から学べるため、未経験でも始められます。</dd>
  </dl>
</section>

上記のように、見出しと本文の関係がはっきりしている範囲はsectionタグと相性が良いです。

sectionタグは入れ子にできる

sectionタグは、必要に応じて入れ子にすることもできます。大きなテーマの中に、さらに小さなテーマがある場合に使用します。

<section>
  <h2>学習コース</h2>

  <section>
    <h3>HTMLコース</h3>
    <p>HTMLの基礎を学びます。</p>
  </section>

  <section>
    <h3>CSSコース</h3>
    <p>CSSの基礎を学びます。</p>
  </section>
</section>

ただし、入れ子にする場合は見出しの階層も意識しましょう。h2の中にh3を置くように、内容の親子関係が自然になる形で使うことが大切です。

オススメ：HTML、CSSの問題集に無料で挑戦しよう！
HTMLを勉強していると、調べれば分かることもありますが、実際に自分でアウトプットするのは難しいと感じることがあります。
忍者CODEのHTML、CSS 学習の無料問題集では、HTML、CSSに関する問題を用意しています。
関連記事：「HTMLのid属性とは？classとの違いや使い方を初心者向けに解説」

sectionタグを使う時の注意点

sectionタグは便利なHTMLタグですが、使い方を間違えるとHTMLの構造がかえってわかりにくくなります。特に初心者の方は、「なんとなく区切りたい」という理由だけでsectionタグを使ってしまうことがあります。

sectionタグは、見た目を整えるためだけに使うタグではありません。意味のあるまとまりかどうかを確認してから使うことが重要です。

見出しがない範囲に無理に使わない

sectionタグは、基本的に見出しを持つまとまりに使います。見出しを付けても不自然な範囲であれば、sectionタグではなくdivタグを使う方が適している場合があります。

【NGな例】

<section class="button-area">
  <a href="/contact">お問い合わせ</a>
</section>

この例では、単にボタン周りのデザインを調整したいだけで、1つのテーマを持つセクションとは言いにくいです。

【改善例】

<div class="button-area">
  <a href="/contact">お問い合わせ</a>
</div>

このように、装飾や配置のためだけの範囲であればdivタグの方が自然です。

sectionタグを必要以上にネストしない

ネストとは、要素の中に別の要素を入れることです。sectionタグを何重にも入れ子にすると、見出しの階層やHTMLの構造がわかりにくくなります。

【NGな例】

<section>
  <h2>サービス</h2>
  <section>
    <section>
      <p>サービス説明</p>
    </section>
  </section>
</section>

このような構造は、どのsectionが何のテーマを表しているのかわかりにくくなります。

【改善例】

<section>
  <h2>サービス</h2>
  <p>サービス説明</p>
</section>

不要な入れ子を減らすことで、HTMLの構造がシンプルになり、保守しやすいコードになります。

SEOやアクセシビリティを意識する

Googleなどの検索エンジンは、HTMLの構造を解析してページ内容を理解しています。そのため、意味のあるまとまりにはsectionタグを使い、ナビゲーションにはnavタグ、記事にはarticleタグなど、役割に合ったタグを選ぶことが重要です。

用途	推奨タグ
ページ内の章・テーマ	`<section>`
ナビゲーション	`<nav>`
独立した記事	`<article>`
ヘッダー	`<header>`
フッター	`<footer>`

このようなタグは「セマンティックタグ」と呼ばれ、要素の意味を検索エンジンやブラウザへ正しく伝える役割があります。

関連記事：「HTMLのdivタグとは？使い方やclassとの関係を解説」

sectionタグとdivタグ・articleタグとの違い

sectionタグは、divタグやarticleタグと混同されやすいタグです。どれも範囲を囲むことができますが、役割が異なります。

sectionタグとdivタグの違い

divタグは、タグ単体では意味を持たない汎用的なタグです。CSSを当てるための箱や、複数の要素をまとめるために使われます。

一方、sectionタグは「1つのテーマを持つまとまり」という意味があります。

意味のあるテーマのまとまりならsectionタグ
見た目や配置のためだけならdivタグ

<section>
  <h2>お知らせ</h2>
  <p>最新情報を掲載しています。</p>
</section>

<div class="layout-box">
  <p>装飾用の箱です。</p>
</div>

sectionタグは意味のある区切り、divタグは意味を持たない汎用的な箱として使い分けるのが基本です。

sectionタグとarticleタグの違い

articleタグは、ブログ記事、ニュース記事、レビュー、投稿コメントのように、その部分だけで独立して読める内容に使います。

一方、sectionタグは、ページや記事の中にある章やテーマの区切りに使います。

<article>
  <h1>HTML入門</h1>

  <section>
    <h2>HTMLとは</h2>
    <p>HTMLの概要を説明します。</p>
  </section>

  <section>
    <h2>HTMLの基本構造</h2>
    <p>HTMLファイルの書き方を説明します。</p>
  </section>
</article>

このように、articleタグの中にsectionタグを入れて、記事内の章を分ける使い方もできます。

単独で配信・再利用できる内容ならarticle、ページ内の章や話題の区切りならsectionと考えると混同しにくくなります。

sectionタグと見出しタグの関係

sectionタグを使うときは、h2やh3などの見出しタグとセットで考えることが大切です。見出しがあることで、そのsectionが何についてのまとまりなのかが明確になります。

<section>
  <h2>学習の流れ</h2>
  <p>HTML、CSS、JavaScriptの順番で学習します。</p>
</section>

sectionタグを使うときは、「この範囲の見出しは何か？」を考えながら書くと、自然なHTML構造にしやすくなります。

HTML・CSSを使った学習についてさらに詳しく知りたい方へ

HTML・CSSを学んで自分だけのスキルを身につけたい
HTML・CSSのスキルを身につけてwebクリエイターとして活躍したい
サポートが充実しているプログラミングスクールを知りたい

そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
忍者CODEは未経験からでもプロのエンジニアを目指せるオンラインプログラミングスク―ルです。
期間制限なく動画を視聴できるので、自分のペースで学習することができます！

sectionタグを実務で使う例

実際のWeb制作では、sectionタグはトップページの各ブロックや、LPのコンテンツ区切り、記事ページの章分けなどで使われます。

トップページの構成に使う

企業サイトやサービスサイトのトップページでは、以下のようにsectionタグを使うことがあります。

<main>
  <section class="hero">
    <h2>未経験からWeb制作を学ぶ</h2>
    <p>HTMLとCSSの基礎から学習できます。</p>
  </section>

  <section class="features">
    <h2>特徴</h2>
    <p>動画教材と課題で実践的に学べます。</p>
  </section>

  <section class="price">
    <h2>料金</h2>
    <p>料金プランを紹介します。</p>
  </section>
</main>

各sectionにclass名を付けることで、CSSでデザインを調整しやすくなります。

.features {
  padding: 64px 20px;
  background-color: #f8f8f8;
}

記事ページの章分けに使う

ブログ記事や解説記事では、articleタグの中でsectionタグを使い、章ごとに内容を分けることがあります。

<article>
  <h1>HTMLの基礎</h1>

  <section>
    <h2>HTMLとは</h2>
    <p>HTMLの概要を説明します。</p>
  </section>

  <section>
    <h2>HTMLの書き方</h2>
    <p>基本的な書き方を説明します。</p>
  </section>
</article>

実務では、ページ全体の大きなまとまりをsectionで分け、細かい装飾やレイアウト調整はdivで補うことが多いです。