作ったもの
「HTML5.2のタグの親要素を入力すると、包含可能な子要素の一覧を表示できるツール」と、「HTML5.2のタグ一覧と、各タグに包含可能な子要素の一覧」を作成しました。
作成経緯
コーディングを教えているとほぼ100％出る質問の一つに「どのタグがどのタグに入るのか・入れていいのかわからない」というものがあります。
HTML4.01時代であれば、ブロックレベル要素とインライン要素を大まかに覚え、インライン要素の中にブロック要素は入らないというところから覚えれば、後は書き慣れて行くうちに覚えることができました。
ところがHTML5になってからコンテンツモデルの概念が登場し、ブロックレベル要素とインライン要素という分け方ができなくなってしまったため、覚えるキッカケが失われてしまっているように感じました。
もちろん、コンテンツモデルを最初から理解するというのが良いですし、現在はそういう分類ではないということを念頭に置きながらブロックレベル要素とインライン要素の分け方で覚え始めるのも良いと思いますが、いずれにせよ、ちょっと困った時に検索しても、仕様書以外のこれといったサイトなどが見つからなかったので作成しました。
作っていて感じたのは、昔のままのブロックレベル要素とインライン要素脳のままでいると、間違ったことを教えてしまいそうだなということでした。
免責など
正しい情報を提供できるように努めていますが、当ツールで出力された結果や一覧の内容は必ずしも正しいと保証されたものではございません。
作成途中にリストズレを起こしたりしている可能性もありますし、仕様の細かい注意点までは網羅できていなかもしれません。
どのように使われて欲しいか？
調べてみると、仕様の都合上なのか、「このタグにこのタグを包含することはまずあり得ないだろう」というものも許容されていたりします。
情報を鵜呑みにするのではなく、どう信念を持ってマークアップをするかが大事だと思うので、あくまでも、ド忘れした時や、そう言えばどうだったっけ？みたいな時に利用して貰えたらと思います。
また、本当の初学者で、仕様書を読むのがツラい人などにも向いているかもしれません。
おわりに
どのタグにどのタグが入るのかは暗記ではなく、タグの意味を理解しながら、たくさんのコードを書いて行けばおのずと覚えられると思います。
最初は都度カンニングすれば良いと思いますが、しばらくしたら普通のコーディングであれば特に何も見ずに出来るように努力できるとよいのかなと思います。