コーディングの際に「〇〇タグの中に△△タグを入れてもいいんだっけ？」といった疑問を持つことがあります。 コーディング初心者の方はもちろん、長くコーディングに携わっている方でも、html5からルール変更されている部分があり、迷うこともあるかと思います。
そのような時の判断の仕方をご紹介します。
基本概念として・・・
以前はブロックレベル要素とインライン要素という概念がありました。 インライン要素の中にブロック要素を入れてはいけないということになっていましたが、html5以降はその概念が廃止され、コンテンツモデルとカテゴリーという概念が導入されています。
※因みに、CSSのdisplayプロパティに存在するblockやinlineといった値は従来通りです。
カテゴリーとは？
7つのコンテンツに定義されおり、要素はその内のいずれか、もしくは複数のカテゴリーに属しています。
参考：http://www.tohoho-web.com/html/memo/html5.htm
コンテンツモデルとは？
要素にどのカテゴリーのコンテンツを入れていいかを決めているルールです。 予め決められています。
ネストできるタグの確認方法
W3Cのコンテンツモデルページを開きます。 https://www.w3.org/TR/html52/dom.html#content-model 少しスクロールするか左のメニューを利用して、カテゴリー毎に表示されているタグ一覧を参照します。
確認したいタグを見つけたらクリックしてください。
そのタグのカテゴリーとコンテンツモデルが表示されます。
コンテンツモデルをクリックすると、入れることのできるタグ一覧が表示されます！
より分かりやすい一覧表を掲載しているブログなどもあったりしますが、 W3Cサイトでチェックしている分には、仮にルールが変更されても間違いがないのでこちらの方法をオススメします。
