HTMLのsectionタグの使い方を初心者向けにやさしく解説！意味と使い方を完全ガイド

新人と先輩の会話形式で理解しよう

新人

「HTMLの<section>タグっていつ使えばいいんですか？」

先輩

「<section>タグは、ページ内の内容を意味ごとに分けたいときに使うんだよ。」

新人

「<div>タグと何が違うんですか？」

先輩

「良い質問だね。それじゃあ、意味のある区切りとしての<section>の使い方を、具体例と一緒に説明していこう。」

1. sectionタグとは何か？

HTMLの<section>タグは、ウェブページ内の内容を意味ごとにグループ化するために使うタグです。「見出し＋本文」のセットで構成されるような内容の区切りに適しています。たとえば、「サービス紹介」「会社概要」「お問い合わせ」など、それぞれのトピックごとに<section>を使うことで、ページの構造がわかりやすくなり、検索エンジンにも意味が伝わりやすくなります。

2. sectionタグの基本的な使い方

実際に<section>タグを使ってHTMLを記述する基本的な例を紹介します。


<section>
  <h2>サービス紹介</h2>
  <p>私たちのサービスは、初心者でも簡単に使えるツールを提供しています。</p>
</section>

ブラウザ表示

<section>タグの中には、必ず見出しタグ（<h1>〜<h6>）を含めるのが基本です。検索エンジンは見出しと本文をセットとして認識するので、SEOにも良い影響を与えます。

3. 複数のセクションを使ってページ全体を構成する

1つのページの中に複数の意味を持つ部分がある場合、それぞれを<section>タグで区切って書くことで、全体の構造が明確になります。


<section>
  <h2>会社概要</h2>
  <p>私たちは2020年に設立されたIT企業です。</p>
</section>

<section>
  <h2>お問い合わせ</h2>
  <p>ご質問はメールフォームよりご連絡ください。</p>
</section>

ブラウザ表示

このように、ページの内容をトピックごとに<section>で分けることで、読みやすさもSEO対策もバッチリです。

4. sectionタグとdivタグの違い

<section>タグと<div>タグはどちらも要素をグループ化するために使いますが、意味的には異なります。<section>タグは「意味のある区切り」であり、検索エンジンがコンテンツの意味を理解しやすくする役割があります。

一方、<div>タグは意味を持たない単なる「箱」で、主にレイアウトやスタイルの目的で使います。したがって、意味のある情報の区切りには<section>、スタイルやデザインのためには<div>を使い分けましょう。

5. sectionタグと他の構造化タグの関係

<section>タグは、他のHTML5構造化タグと組み合わせて使うことで、さらに意味のあるマークアップが可能になります。例えば、<header>、<footer>、<article>などとの組み合わせがよく使われます。


<section>
  <header>
    <h2>最新ニュース</h2>
  </header>
  <p>新サービスのリリースが決定しました。</p>
  <footer>
    <p>2025年4月16日</p>
  </footer>
</section>

ブラウザ表示

このように構造を明確にしておくことで、検索エンジンにも意味が伝わりやすくなり、SEOにも好影響を与えます。

6. sectionタグのネスト（入れ子構造）

<section>タグは、入れ子にして使うこともできます。たとえば、大きなテーマの中に複数の小さなトピックがある場合、外側の<section>で大きなテーマを、内側の<section>で各トピックを分けることができます。


<section>
  <h2>サービス紹介</h2>
  
  <section>
    <h3>Web制作</h3>
    <p>デザインからコーディングまでお任せください。</p>
  </section>
  
  <section>
    <h3>SEO対策</h3>
    <p>検索結果で上位表示されるための施策を行います。</p>
  </section>
</section>

ブラウザ表示

このように入れ子構造で記述することで、さらに細かく情報を整理することが可能になります。