HTML5になってからdevなどのブロック要素をaタグで囲ってもOKになったので
エリア自体をリンクにしたいときなど、まるっとaタグで囲ったりする事も多いです。
が、ここで少し気をつけたい事。
aタグをaタグで囲むとブラウザが空気読んで勝手にaタグの閉じタグを出力してくれるので崩れます!
例えば、
エリア全体はhogeのリンクで、fugaをクリックした時はfugaに飛ばしたいみたいな感じで、次のようなHTMLを書いたとします。
<div class="area"> <a href="hoge"> <p>hoge<a href="fuga">fuga</a></p> hogehoge </a> </div>
これをブラウザで表示すると...
Chrome | firefox |
---|---|
![]() |
![]() |
こんな感じに閉じタグを追加してくれます。。。
テンプレートエンジンやjsガリガリ使ってると
そっちのバグやエラーを疑ってしまって中々気付かずにハマってしまいがちです。
とっても危険が危ない感じです!!