aタグに別のaタグをネストすることが出来ない理由

概要

先日、Railsでlink_toヘルパーを使用し、誤ってネストしてしまったことをきっかけに、<a>タグに別の<a>タグをネストすることが出来ない理由についてまとめようと思い、下記に記述させて頂きます。

理由

HTMLの仕様により、<a>タグの中に別の<a>タグをネストすることはできません。
これは、ブラウザがHTMLを解析し、ハイパーリンクをどのように扱うべきかを決定する際に混乱を避けるためのものです。

例えば、以下のようなコードを例にします。

<a href="url1">
  Click here
  <a href="url2"> or here </a>
</a>

これは、ユーザーがリンクをクリックした時、ブラウザがどのURLにナビゲートするべきかを明確に判断できない為です。

私の誤ってしまったケース

Railsでは、link_toヘルパーを使用して簡単に<a>タグを生成することができますが、このヘルパーを外のdivタグとそのdivタグにネストされているpタグどちらにもaタグでリンク化させたかったが為に、上記の問題に直面してしまいました。でも冷静に考えたら、その必要が全くない事に気づきました。

全体をクリック可能にしたい場合の解決法は下記のように、ネストではなく、一つのlink_toヘルパーを使用して全体を囲むです。

<%# 上記省略 %>
<%= link_to("/posts/#{post.id}") do %>
  <div class="item">
    <p class='title'> <%= post.title %> </p>
  </div>
<% end %>
<%#　下記省略 %>

この変更により、全体がクリック可能なリンクとなり、HTMLの仕様にも適合します。

参考

aタグにaタグを入れ子することはできない？初心者に超わかりやすく解決策を解説していく！