section、article、divの使い分け

いまだに使い分けで迷うsection、article、div。毎回忘れて、毎回調べなおしているので自分用にメモ。

要素の意味と独立性

要素に意味があり、独立して成り立つ → article(h要素が必要)

要素に意味があり、独立して成り立たない → section(h要素が必要)

要素に意味がない → divを使う

ネスト(入れ子)のルール

OKarticle の中に article

OKarticle の中に section

OKsection の中に section

NGsection の中に article

divはどういう関係でネストしてもOK。

独立して成り立つ要素を含んでいるのに、内包した瞬間に独立して成り立たなくなることはないので、section の中に article をネストさせるのはコーディングの意味的におかしいですね。

独立して成り立つかどうかの判断

この「独立して成り立つかどうか」を判断するのはコーディングする人によるので、線引きが揺らいで難しいです。チームで作業をする際などは、ある程度ルールを決めてから作業を始めた方がスムーズかと思います。

ニュース記事にたとえると、記事が article で、それを構成する小さな文章群が section という感じ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

13 − 1 =