HTML5が2014年に勧告されてからはや4年。当時は追加タグに翻弄された制作者の方々も、だいぶ慣れてきていると思います。
ただ、「div」と「section」と「article」の使い分けってちょっと考え込んじゃったりしませんか？

自分は今でも時々悩みます。
そんなわけで、自分の備忘録も兼ねて今回は「div」と「section」と「article」の使い分けについて説明しようと思います。

div要素

まずはお馴染みのdiv。HTML5が出てくる前は、ほとんどこれでなんとかしていませんでした？自分はしていました。

W3Cでは「他のどのような要素も適当ではない時に、最後の頼みの綱として使用することを推奨します。」と説明されています。最も汎用的で、特別ではない意味を持つタグです。その代わりに、あまり乱用することは勧められていません。飽くまで「最後の頼みの綱」というわけです。（そうは言っても使っちゃうよね）

HTML5になってからは、align属性は廃止されていますので、<div align=”center”>などと記述することはできません。スタイルシートを使いましょう。

section要素

文書の中で単独のセクションを表します。
sectionの中は明確なテーマを持っていて、そのテーマはsectionタグの直後に明記されるべきだそうです。ですから絶対ではないのですが、見出し（h1からh6の要素）が入っていることを強く推奨されています。

ただし、要素の内容が個別の記事をまとめたものであればarticle要素がより適しているかもしれません。article要素については後述します。

section要素は汎用コンテナーとして使用してはいけないそうです。スタイル付けのみの目的であれば、それはdivの出番です。

article要素

意味的に関連したコンテンツのセクションに適用します。そしてその内容は、独立しているべきとされています。要は、他のページからarticle要素の中身が切り離されても意味としては通じるようにするということですね。大体フォーラムの投稿、雑誌や新聞の記事、ブログの記事などに利用されます。

article要素を入れ子にした場合は、内側の要素は外側の要素の関連する記事であることを表します。article要素もsection要素と同じく、見出しを入れるべきとされています。

まとめ

div要素についてはつまり、「他のどのタグでも括れなくて、でもここにスタイルを設定したい！」という時に使えばいいんだなと解釈しているんですが、article要素とsection要素は慣れるまで混乱するような気がします。ただ、新しく追加された要素の意味をきちんと理解して記述することがSEO的にも良いので、ブラウザ上での表示だけにこだわらないで正しい記述をしていきたいですね。

ちなみに今回書きながら調べていて知ったのですが、HTML5が勧告された当初は「h1要素が複数使用されても良い」とされていたんですが、2016年にHTML5.1が出た時にその項目は削除されたんだそうです。以前は1ページにh1はひとつしか使っちゃいけないとされていたので、複数使用可と聞いた時に随分「？」となったものですが、結局昔の仕様に戻っていたんですね。

そんな風に今後HTMLのバージョンが変わっていくことで、現在記述しているHTMLの意味合いも変わってきてしまうのかもしれませんねぇ…。