結論
HTMLのタグは入れ子できないものがある。
困ったらチートシートで確認しよう。
HTML5チートシート
経緯
以前書いたGrid Layoutで子要素がaタグだと崩れるという記事の内容について、根本原因を考えていた。
軽く調べてみると、HTML5では入れ子についてルールがいくつかあるらしい。
まぁふんわりとは知っていたのだが、いざ直面するとハッとさせられた。
ちなみに私が直面したのはaタグを入れ子にするとレンダリングがおかしくなるという事象。
詳しくは上記の記事を読んでほしい。
で、どうする？
とはいえ細かく全部覚えてられないので、ざっくり気をつければよいという気持ち。
同様の事象が発生しても今度はスムーズ に処理できそう。
ただルールは気軽に確認したく調べたところ、結論にも書いたチートシートを発見した。
チートシートについて
まんまHTML5 チートシートという名前になっている。
カーソルをホバーさせると各タグに「親」「子」というボタンが表示される。
「親」をクリックすると子にできるタグが色付き表示される。
「子」をクリックすると親にできるタグが色付き表示される。
とっても便利！
まとめ
やっぱHTML、CSSはとりあえずで作るのは簡単だが、細かいところ追求するとなると難しい。
