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>

ブラウザ表示

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

7. sectionタグを使う際の注意点

<section>タグを使うときには、必ず意味を持たせるようにしましょう。スタイル目的だけで使うと意味が伝わらず、逆にSEOの評価を下げてしまうこともあります。また、すべてのコンテンツを<section>で囲むのではなく、本当に意味のある区切りだけを対象に使うのがポイントです。

さらに、<section>の中に<h1>〜<h6>などの見出しタグを必ず含めて、どんな内容が書かれているのかを明示しましょう。

8. sectionタグとarticleタグの使い分け

<section>タグとよく比較されるタグに<article>があります。<article>は、それ単体で完結するコンテンツ（ブログ記事やニュース記事など）に使われるのが特徴です。

一方、<section>はページ内のテーマごとの区切りとして使用します。そのため、「独立したコンテンツ」なら<article>、「意味ごとのまとまり」なら<section>と覚えておくと使い分けしやすくなります。

9. sectionタグにclass属性を付けて管理する

<section>タグには、class属性を付けて管理するのが一般的です。これにより、CSSやJavaScriptで特定のセクションを簡単に操作できるようになります。


<section class="service">
  <h2>サービス紹介</h2>
  <p>私たちのサービスは初心者にも使いやすい設計です。</p>
</section>

<section class="contact">
  <h2>お問い合わせ</h2>
  <p>お気軽にご連絡ください。</p>
</section>

ブラウザ表示

このようにclassを設定しておくことで、デザインや機能の管理がしやすくなります。

10. sectionタグを使った実践的なページ構成例

実際のWebサイトでは、複数の<section>を組み合わせてページ全体を構築します。代表的な構成例を見てみましょう。


<section>
  <h2>トップメッセージ</h2>
  <p>ようこそ私たちのサイトへ。</p>
</section>

<section>
  <h2>サービス内容</h2>
  <p>Web制作やマーケティング支援を行っています。</p>
</section>

<section>
  <h2>会社情報</h2>
  <p>所在地や設立情報を掲載しています。</p>
</section>

ブラウザ表示

このようにセクションごとに内容を整理することで、ユーザーにも検索エンジンにもわかりやすいページを作ることができます。