記事のカードコンポネント作成の際に

記事のコンポネント作成の際に、画像、タイトル、本文、ビュー数...などとコンポネントごとにファイルを分けて、ブロックで...とやっていたのですが、

カードの中にタグを表示させようとし、そのタグをカード以外の場所でも再利用しようとしたため、<a>を用いたのですが、そこで悲劇が起きました。

検証ツールを除いたところ、なぜか囲んでいたはずのブロックの外に空の<a>タグが生成されているのです。

なぜこのようなことが起きるのか

HTML において、マークアップの際にコンテンツモデルというものがあるようです。

そのルールの中では、a タグのようなインタラクティブ・コンテンツ（他にはinputやselect）などは入れ子にすることができないそうです。

※インタラクティブ・コンテンツ：閲覧者が操作する要素のこと。

入れ子にしない！

というのが恐らく正しいマークアップなのだと思います。
画面に表示されるだけで良いと思わず、SEO を意識したマークアップを心がけていきたいと思います！