1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

aタグを入れ子にしていることに気が付かずに3時間以上費やした件

Last updated at Posted at 2024-10-03

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

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

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

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

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

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

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

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

解決策

入れ子にしない!

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

参考サイト

1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?