htmlのsectionタグとは？articleタグとどう違う？使い方完全ガイド

HTMLを勉強していると、ページの中を「まとまりごとに区切りたい」と思うことがありますよね？そんなときに使うのが<section>タグです。

この記事では、sectionタグの基本・使い方・似たタグとの違い（特にarticle）・実践例・よくあるミスまで、初心者にもわかりやすく解説します。

1. はじめに：HTMLで構造を持たせる意味

HTMLは「構造化された情報」を記述する言語です。検索エンジンや音声読み上げツールにも情報を正しく伝えるには、「意味を持つタグ（セマンティックタグ）」の使い方がカギとなります。

その代表が<section>タグ。意味のある「章」や「話題のまとまり」を表すために使われます。

2. sectionタグとは？

定義

HTMLの<section>タグは、文章内のセクション（話題・章・トピック）を表すタグです。

たとえば、あるWebページが「概要」「特徴」「料金」「FAQ」といった構成なら、それぞれをsectionタグで区切るのが適切です。

https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/section

使用の基本ルール

• section内には、そのセクションの内容を表す見出し（通常は<h2>〜<h6>）を1つ含めるのが推奨されます。
• 「レイアウト」目的ではなく「意味のあるまとまり」を示すために使う

<section>タグは、文書内の「意味あるまとまり」を示すためのセマンティックタグです。
そのため、そのセクションが何の内容なのかを示す見出し（<h2>など）を含めることが推奨されています。

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

シンプルな例

<section>
  <h2>サービスの特徴</h2>
  <p>シンプルな操作性と柔軟なカスタマイズ性が特長です。</p>
</section>

🧩 ネスト（入れ子）構造の例

sectionタグの中にsectionタグを入れることも可能です。

<section>
  <h2>よくある質問</h2>
  <section>
    <h3>Q1：サポート体制は？</h3>
    <p>メール＆チャットサポートを完備しています。</p>
  </section>
</section>

4. sectionタグの使用シーン

• ブログ記事の各章（導入、本編、まとめなど）
• 製品紹介の各パート（特徴、料金、レビューなど）
• FAQの各質問ブロック

**「トピックごとの意味あるまとまり」**に使うのがポイントです。

5. 他のセマンティックタグとの違い

sectionタグとarticleタグの違い

sectionタグと良く比較されるものでarticleタグがあります。
似たタグですが、どのような違いがあるのでしょうか？

sectionとは？

• ページ内の特定のトピックやテーマのまとまり
• 他の内容と関連性がある
• 1ページ内で複数回使用してOK

articleとは？

• 独立したコンテンツ（それ単体で完結）
• 外部に切り離しても意味が伝わる
• ブログ記事やレビューなどに最適

一言で言えば…

section = ページ内の章構成

article = 一つの完成された情報（記事）

使い分けのヒント

• 「これ、SNSに投稿できるくらい独立してる？」→ はい → <article>
• 「これは全体の一部の話題だよね？」→ はい → <section>

厳密に分けないといけない！！
という物ではなく、気軽にこのような分け方で良いと思います。

ネストもOK

<article>
  <h1>学習記録：Day1</h1>
  <section>
    <h2>学んだこと</h2>
    <p>今日はsectionとarticleの違いを学びました。</p>
  </section>
</article>

6. 実践例：ブログ記事の構造に活かす

<article>
  <h1>HTML講座：セマンティックタグ編</h1>
  <section>
    <h2>導入</h2>
    <p>HTMLには構造を明確にするためのタグがあります。</p>
  </section>
  <section>
    <h2>sectionタグの使い方</h2>
    <p>sectionはページ内の話題ごとの区切りに使います。</p>
  </section>
</article>

7. よくある間違いと注意点

• ❌ sectionに見出しがない
• ❌ 見た目のスタイル目的で使っている（→この場合はdivが適切）
• ❌ articleとsectionを混同してしまう

目的と意味に合ったタグ選びを意識することで、HTMLの質はグッと上がります。

8. まとめ

• sectionは「意味のあるセクション（章）」
• articleは「独立した1コンテンツ（記事）」
• 正しい使い分けでSEOやアクセシビリティにも効果的！