created: 2020-05-18T23:12:33.000Z

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タグを含むと、定義上どちらへの接続なのかが曖昧になる

参考

対処法

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

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

参考