HTMLには、コンテンツの意味を明確にするため、様々なタグがあります。その中でも、<section>タグと<article>タグは、コンテンツのセクションを表現するために頻繁に使用されます。しかし、それぞれの使い方に違いがあります。
<section>タグ
<section>タグは、文書の中でテーマごとにコンテンツをまとめるために使います。例えば、ニュースサイトでは、政治、スポーツ、エンタメといったカテゴリごとに利用します。<section>タグは、その内容があるテーマに関連していることを示すために使います。
<section>
<h2>政治</h2>
<p>政治に関する記事がここに入ります。</p>
</section>
<article>タグ
一方、<article>タグは、独立したコンテンツを示すために使います。このタグの内容は、他の場所でもそのまま使えるような、自己完結した情報を表します。ブログの記事、ニュース記事、製品レビューなどに使われます。
<article>
<h1>新しいJavaScriptフレームワークの紹介</h1>
<p>このフレームワークは...</p>
</article>
使い分けのポイント
-
<section>タグ: 関連する複数のコンテンツをグループ化したいときに使います。 -
<article>タグ: 独立したコンテンツや、文脈に依存しない内容に使います。
この使い分けを理解することで、よりわかりやすいHTMLを記述できるようになります。特に、SEOやアクセシビリティの観点からも重要なポイントなので、ぜひ意識して使い分けてみてください！