🐙
aタグを入れ子にしてはいけないことを知らずに3時間費やした件
記事のカードコンポネント作成の際に...
記事のコンポネント作成の際に、画像、タイトル、本文、ビュー数...などとコンポネントごとにファイルを分けて、ブロックで...とやっていたのですが、
カードの中にタグを表示させようとし、そのタグをカード以外の場所でも再利用しようとしたため、<a>を用いたのですが、そこで悲劇が起きました。
検証ツールを除いたところ、なぜか囲んでいたはずのブロックの外に空の<a>タグが生成されているのです。
なぜこのようなことが起きるのか
HTML において、マークアップの際にコンテンツモデルというものがあるようです。
そのルールの中では、a タグのようなインタラクティブ・コンテンツ（他にはinputやselect）などは入れ子にすることができないそうです。
※インタラクティブ・コンテンツ：閲覧者が操作する要素の
解決策
入れ子にしない！
というのが恐らく正しいマークアップなのだと思います。
画面に表示されるだけで良いと思わず、SEO を意識したマークアップを心がけていきたいと思います！
参考サイト
Discussion