結論

HTMLのタグは入れ子できないものがある。
困ったらチートシートで確認しよう。
HTML5チートシート

経緯

以前書いたGrid Layoutで子要素がaタグだと崩れるという記事の内容について、根本原因を考えていた。
軽く調べてみると、HTML5では入れ子についてルールがいくつかあるらしい。
まぁふんわりとは知っていたのだが、いざ直面するとハッとさせられた。

ちなみに私が直面したのはaタグを入れ子にするとレンダリングがおかしくなるという事象。
詳しくは上記の記事を読んでほしい。

で、どうする?

とはいえ細かく全部覚えてられないので、ざっくり気をつければよいという気持ち。
同様の事象が発生しても今度はスムーズに処理できそう。
ただルールは気軽に確認したく調べたところ、結論にも書いたチートシートを発見した。

チートシートについて

まんまHTML5 チートシートという名前になっている。
カーソルをホバーさせると各タグに「親」「子」というボタンが表示される。
「親」をクリックすると子にできるタグが色付き表示される。
「子」をクリックすると親にできるタグが色付き表示される。
とっても便利!

まとめ

やっぱHTML、CSSはとりあえずで作るのは簡単だが、細かいところ追求するとなると難しい。