<section>

セクションタグ（section）

文書の意味のまとまり（章や節）を示すためのセマンティック要素。

sectionタグ＝文書の「章」を作る

`

` は、HTML5で導入されたセマンティック要素で、文書内の「意味のまとまり（セクション）」を表現します。本や論文における「章」や「節」のような役割を果たします。

単なる「見た目のグループ化」ではなく、「ここからここまでは一つのトピックについての内容です」という情報構造を示すために使います。

基本的な使い方

<section>
  <h2>私たちのミッション</h2>
  <p>私たちはすべての人に教育を届けます...</p>
</section>

<section>
  <h2>サービス内容</h2>
  <p>以下のサービスを提供しています...</p>
</section>

見出しタグとの組み合わせ

`

` タグを使う際の重要なルールとして、「必ず見出し（h2〜h6）を含める」というものがあります。見出しのないセクションは、そのセクションが何について書かれているのかを読者や検索エンジンが理解できません。

❌ 悪い例：見出しがない

<section>
  <p>これは何のセクション？</p>
</section>

divタグとの使い分け

最も重要な違いは「意味（セマンティクス）」の有無です。

タグ 意味 使用場面
<section> 意味のまとまり トピックごとの区切り（章・節）
<div> 意味なし 純粋なスタイリング目的
<article> 独立したコンテンツ ブログ記事、ニュース記事など

articleタグとの違い

`

` は「それ単体で完結する独立したコンテンツ」を表します。例えば、ブログ記事やニュース記事は `
` が適切です。

一方、`

` は「ページ全体の一部分」として機能します。`
` の中に複数の `
` を配置することもあります。

SEOとアクセシビリティへの貢献

検索エンジンは `

` タグを見て、ページの構造を理解します。適切に使うことで、検索結果での評価が向上する可能性があります。

また、スクリーンリーダーは `

` をランドマークとして認識し、ユーザーがページ内を効率的にナビゲートできるようサポートします。

まとめ

`

` タグは、情報を論理的に整理するための強力なツールです。「見た目」ではなく「意味」で使い分けることで、SEO、アクセシビリティ、保守性のすべてが向上します。