section と article の違いをわかりやすく解説！
HTML5では、セマンティック（HTMLのタグを正しく使い分けること）なタグが多く導入され、コードの意味をより明確に記述できるようになりました。その中でも <section> と <article> は特に混同しやすい要素です。
この記事では、この2つのタグの違いや正しい使い方について詳しく解説します。
正直divで全て書けばいいじゃん・・・って思いますよね。section とやarticleを使わなくてもHPは完成します。しかしSEOを重視するのであればしっかり使い分ける必要があります。
1. section と article の基本的な意味
section: ページの一部を区切るセクション
Webページ内で、主にテーマや話題ごとに内容をまとめるためのセクション（区間）を定義します。例えば、見出しやテーマごとに内容を分ける際に使われます。通常は、そのセクションの内容を表す見出し（<h1>～<h6>）を伴います。
特徴:
- 主にページ内の構造を整理するために使用。
- 独立性が低く、他のセクションと関係が深い
- 見出しを伴うことが推奨される。
例:
<body>
<section>
<h2>HP作成料金</h2>
<p>料金の説明</p>
</section>
<section>
<h2>HP作成の流れ</h2>
<p>流れの説明</p>
</section>
</body>
article: 独立したコンテンツを表す要素
<article> は、「他のコンテンツから独立した内容」を表現するための要素です。ブログの記事やニュース、商品説明など、単独で成り立つ情報に適しています。記事単体で他のページやサイトに共有しても意味が通じる場合に使用します。
特徴:
- コンテンツが他のコンテンツに依存しない。
- 通常は、単体で公開できる内容（記事、投稿、レビューなど）に使う。
- ページ全体に複数の <article> を配置することが可能。
例:
<body> <article> <h1>sectionとarticleについて</h1> <p>sectionとarticleについて説説明します</p> <h2>sectionとは</h2> <p>説明文</p> <h2>articleとは</h2> <p>説明文</p> </article> </body>
2. section と article の違いを表で比較
全く別の内容なので同じページ内に<article>を複数使用しています。
4. SEOとアクセシビリティの向上
<section> と <article> を正確に使い分けることで検索エンジンが構造を理解しやすくなります。スクリーンリーダーも、記事内の各セクションを正確に読み上げられるようになります。
クローラーが理解しやすい文書構造にすることでSEO対策にもなるのです。
5. まとめ
<section> と <article> はHTML5の中で非常に重要なセマンティック要素です。それぞれの役割と使い方を理解し、正しく使い分けることで、SEOやアクセシビリティが向上します。
インスタグラムでは画像で説明しています。
よかったら見てください。
@shop.kinet
