section、article、divの使い分け

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

要素の意味と独立性

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

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

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

ネスト（入れ子）のルール

OK：article の中に article

OK：article の中に section

OK：section の中に section

NG：section の中に article

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

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

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

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

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