かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

HTML aタグの中にaタグを入れると崩れる

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
f:id:kikiki-kiki:20140424233843p:plain f:id:kikiki-kiki:20140424233847p:plain

こんな感じに閉じタグを追加してくれます。。。

テンプレートエンジンやjsガリガリ使ってると
そっちのバグやエラーを疑ってしまって中々気付かずにハマってしまいがちです。
とっても危険が危ない感じです!!