htmlではaタグはネストできない

htmlではaタグがネストできない。できないと言うか、そういうコードを書くとブラウザがDOM構造をネストのない形に勝手に変更する。警告はでない。

たとえば

aタグの中にaタグが入ってる形

<a>
    <p>テストテスト</p>
    <a>リンク</a>
</a>

↑のコードを書くと、ブラウザはこれを↓のようにDOMツリーにする

<a>
    <p>テストテスト</p>
</a>
<a>リンク</a>

理由

こんな理由でaタグのネストはできないことになっている

• もともとaタグはリンクできるタグであり、aタグ=リンク ではない
• aタグは概念上、点であり面積をもたない (よって他の要素を含まない)
• aタグは他のページとの接続点を示すタグである
• aタグが他のaタグを含むと、定義上どちらへの接続なのかが曖昧になる

参考

• html - Why are nested anchor tags illegal? - Stack Overflow

対処法

objectタグでaタグを囲うと、書いた通りのDOMツリーになる が、これは明らかなハックなのでやらないで済むならしないほうがよい

<a>
    <p>テストテスト</p>
    <object>
        <a>リンク</a>
    </object>
</a>

参考

• aタグの中にaタグを書きたい時のtips - Qiita