HTMLのセクションとは

HTMLで「セクション(section)」はドキュメント内の一つのセクションまたはセグメントを定義し、構造的に意味のある独立したコンテンツブロックをグループ化するために使われます。<section>タグを使用して、関連するコンテンツをまとめて意味のあるグループにします。これは記事、ブログエントリ、ニュースアイテム、ガイドの章などウェブページ内の独立したセクションを識別するのに役立ちます。

<section>の使用

<section>タグは通常は見出し(<h1><h6>)を含み、それに続くコンテンツ(パラグラフ、リスト、画像、テーブルなど)で構成されます。この要素は以下のように使用します。

<section>
  <h2>セクションのタイトル</h2>
  <p>セクションのコンテンツがここに入ります。</p>
  <!-- その他のタグ(画像、リスト、テーブルなど)も含むことができます -->
</section>

<section>の意味的な使用

<section>タグは、セクションが文書全体のアウトラインに論理的に貢献する場合にのみ使用すべきです。単にスタイリングのためにグループ化する場合は<div>タグの方が適切です。

<section>の例

以下は、<section>要素を使用したHTMLドキュメントの例です。

<article>
  <h1>ブログポストのタイトル</h1>
  <p>ここにブログポストのイントロダクションが入ります。</p>

  <section>
    <h2>最初のセクションのタイトル</h2>
    <p>最初のセクションの内容...</p>
  </section>

  <section>
    <h2>次のセクションのタイトル</h2>
    <p>次のセクションの内容...</p>
  </section>

  <!-- その他のセクション -->
</article>

<section>と他の関連要素

<section>要素は<article><aside><nav>などの他の構造的要素とともに使用されることがあります。それぞれの要素は異なる意味を持ちます:

  • <article>: 独立した、再配布可能または再利用可能なコンテンツを表します。
  • <aside>: 本文とは直接関係ないが補足的なコンテンツを表します。
  • <nav>: ナビゲーションリンクを表します。

HTML5ではこれらの「セクショニング要素」は文書のアウトラインを定義するのに役立ち、よりアクセシブルで意味的に豊かなウェブページを作成することができます。

SNSでもご購読できます。

コメントを残す

*