HTMLのsection要素の使い方を徹底解説！正しいマークアップのポイント

この記事では、HTMLの<section>要素の基本的な使い方から実践的な活用例まで、わかりやすく解説します。

section要素とは？

HTMLの<section>要素は、ドキュメント内の個別のコンテンツブロック（セクション）を表すためのコンテナ要素です。関連性のある内容をテーマごとにグループ化する際に使用します。

ページを複数のセクションに分割する

たとえば、企業に関するさまざまな情報を紹介するWebページには、次のような複数のセクションが含まれることがあります。

• ヒーローセクション（メインビジュアル）
• サービス紹介セクション
• チーム紹介セクション
• スポンサーセクション
• お問い合わせセクション

各セクションは、次のように独立した自己完結型のブロックとして記述できます。

<section>
  <h2>セクション1</h2>
  <p>...</p>
  <img src="" alt="" />
</section>
<section>
  <h2>セクション2</h2>
  <p>...</p>
  <img src="" alt="" />
</section>
<section>
  <h2>セクション3</h2>
  <p>...</p>
  <img src="" alt="" />
</section>

article要素の中でsection要素を使う

<section>要素のもうひとつの代表的な使い方は、<article>要素の中に入れるパターンです。

たとえば、複数のトピックを扱う長文の記事があるとします。そのような場合は、<section>要素を使って記事をトピックごとに分割すると、文書構造が明確になり読みやすくなります。

<article>
  <h1>記事のメインタイトル</h1>
  <section>
    <h2>トピック1</h2>
    <p>...</p>
    <img src="" alt="" />
  </section>
  <section>
    <h2>トピック2</h2>
    <p>...</p>
    <img src="" alt="" />
  </section>
  <section>
    <h2>トピック3</h2>
    <p>...</p>
    <img src="" alt="" />
  </section>
</article>

section要素の中にarticle要素を入れる

逆に、<article>要素を<section>要素の中に配置することもできます。

たとえば、トップページに最新のブログ記事カードを一覧表示するセクションがあり、各カードが個別の記事へのリンクを含む場合、次のようにマークアップします。

<section>
  <h2>最新のブログ記事はこちら</h2>
  <article>
    <a href="/path-to-blog-post-1">
      <h3>ブログ記事1</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-2">
      <h3>ブログ記事2</h3>
    </a>
  </article>
  <article>
    <a href="/path-to-blog-post-3">
      <h3>ブログ記事3</h3>
    </a>
  </article>
</section>

section要素とdiv要素の使い分けのポイント

<section>要素を使うべきか迷ったときは、「そのコンテンツに見出し（h2〜h6など）が必要かどうか」を判断基準にするのがおすすめです。見出しを持つ意味のあるまとまりであれば<section>が適しており、単なるスタイリング目的のグループ化であれば汎用コンテナの<div>を使いましょう。

その他の主なコンテナ要素

<section>タグは、コンテナ要素を定義するための数あるHTMLタグのひとつです。よく使われる主なHTMLコンテナ要素には、次のようなものがあります。

<article>、<main>、<header>、<footer>、<form>、そして<div>（他のどのタグも当てはまらない場合に使う汎用的なタグ）などです。それぞれの役割を理解して適切に使い分けることで、SEOやアクセシビリティの面でも大きなメリットがあります。