現役エンジニア・デザイナーの備忘録ブログ

2019.12.30 / 更新日: 2022.1.12
HTML・CSS

articleとsectionの使い分け

articleとsectionは範囲を明確にするためのタグで、セクショニング要素と呼ばれます。セクショニング要素とは、html5より新たに導入されたタグです。従来のh1~h6などの見出しタグに加え、より丁寧なマークアップが可能となりました。

articleとsectionの使い分け

article要素はその部分だけでもページが成り立つ構成、section要素はコンテンツの中の1パーツのようなもので、章・節・項などであることを示します。この新要素であるarticle要素とsection要素を使うことで、階層をより明確にすることができるのです。

 

SEO的なメリットも薄いらしいので、用途がわかりづらい場合は無理して使う必要はありません。ただ、構造として読みやすいソースコードを記述するためには使い勝手の良いタグだと思います。

article要素とsection要素以外の追加タグについてはこちらにまとめてありますので、良かったらチェックしてみてください。

具体的な記述例

article要素の中に、子要素としてsection要素を記述します。そして、<section>内にはそれぞれの階層に合わせたhタグを入れることが推奨されています。ちなみにh1タグは1つのsectionに対して1つが好ましいです。

 


 

関連記事