HTMLのarticleとsectionの使い方｜違いと使い分け

📌

結論

<article> は独立コンテンツ、<section> は関連するまとまり

📝 実際のコードはこちら

<article>
  <section>セクション1</section>
  <section>セクション2</section>
</article>

使い分け

タグ	意味	例
`<article>`	単体で成立するコンテンツ	ブログ記事、コメント、商品カード
`<section>`	関連する内容のまとまり	章、セクション

判断基準：これだけ切り出して別のページに貼っても意味が通じるか？→ 通じれば <article>、通じなければ <section> です。

・<article> = 独立したコンテンツ・<section> = 関連するまとまり・SEOとアクセシビリティに効果あり

article内にsectionを2つ作ってみましょう。各sectionの内容は自由です。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

articleタグ内にsectionを2つ作ってください。各sectionの内容は自由です。

詰まったらヒント

articleが外側、sectionが内側