• Home
  • Web制作
  • 【HTML入門】section要素を使いこなそう！役割やdiv要素との違い、利用シーンをわかりやすく解説

【HTML入門】section要素を使いこなそう！役割やdiv要素との違い、利用シーンをわかりやすく解説

schedule
Tags: HTML

はじめに：Webページを整理整頓しよう！

Webページを作成する際、文章や画像、動画など、様々な要素を配置していきますよね。

その際に、ただ闇雲に要素を並べるのではなく、意味のあるまとまりごとに整理整頓することが重要になります。

そこで活躍するのが、HTMLのsection要素です。

section要素とは？その役割をわかりやすく解説！

section要素とは、Webページ内のコンテンツを意味のある区切りで分割するために使用する要素です。

具体的には、以下のような場合に利用されます。

  • 記事の章や節
  • ブログ記事の導入・本文・まとめ
  • 商品紹介ページの商品ごとのセクション

section要素を使用することで、Webページの構造を明確化し、人間にとっても検索エンジンにとっても理解しやすいページを作成することができます。

div要素との違いは？使い分けをマスターしよう！

Webページの要素を区切る際には、div要素もよく使用されます。

どちらも要素をグルーピングする役割を持ちますが、section要素とdiv要素には明確な違いがあります。

要素 特徴
section要素 意味のあるコンテンツの区切りに使用する
div要素 デザインやレイアウトの都合で要素をグルーピングする

つまり、 「意味のある区切り」 であるかどうかが、section要素とdiv要素を使い分けるポイントになります。

例えば、「記事の章」や「商品紹介」といった意味のある区切りにはsection要素を、「ページ上部のヘッダー部分」や「フッター部分」といったレイアウト上の区切りにはdiv要素を使用します。

具体的な利用シーンを紹介！section要素を使いこなそう！

それでは、具体的な利用シーンを通して、section要素の使い方をより詳しく見ていきましょう。

1. ブログ記事の構成

ブログ記事を構成する際、section要素を使って「導入」「本文」「まとめ」といったセクションに分割することで、記事全体の構造を明確にすることができます。

<article>
  <h1>記事タイトル</h1>
  <section>
    <h2>はじめに</h2>
    <p>導入部分の文章が入ります。</p>
  </section>
  <section>
    <h2>本編</h2>
    <p>本文の文章が入ります。</p>
  </section>
  <section>
    <h2>まとめ</h2>
    <p>まとめの文章が入ります。</p>
  </section>
</article>

2. 商品紹介ページの商品ごとの区分け

複数の商品を紹介するページでは、商品ごとにsection要素を使って区切ることで、各商品の情報を整理して表示することができます。

<section>
  <h2>商品A</h2>
  <img src="商品Aの画像" alt="商品A">
  <p>商品Aの説明文が入ります。</p>
</section>
<section>
  <h2>商品B</h2>
  <img src="商品Bの画像" alt="商品B">
  <p>商品Bの説明文が入ります。</p>
</section>

このように、section要素は様々な場面で活用することができます。

最後に：適切なマークアップで、より良いWebページを！

section要素を適切に利用することで、Webページの構造を明確化し、よりユーザーにとって理解しやすいページを作成することができます。

ぜひ、今回の内容を参考に、section要素を使いこなしてみてください。

関連記事