aタグの中にaタグを入れ子にする方法

はじめに

Webサイト制作をしていると、aタグ（リンク）の中にさらにaタグを配置したい場合があります。しかし、このようなHTML構造は文法的には正しくないため、表示が崩れてしまうことがあります。

今回は、このような状況に対処するための方法として、objectタグで囲む方法と、JavaScriptでの対応方法を紹介したいと思います。

objectタグで囲む

まず1つ目の方法は、objectタグで囲む方法です。

例えば、以下のようなHTMLがあるとします。

<a href="#">
    <a href="#">リンク</a>
</a>

このような構造は正しくないため、表示が崩れてしまいます。しかし、以下のようにobjectタグで内側のaタグを囲むことで、正しく表示することができます。

<a href="#" class="outer-link">
    <object><a href="#">リンク</a></object>
</a>

これにより、aタグの中にaタグを配置してもHTMLが崩れずに正しく表示されるようになります。しかし、この方法はHTMLのセマンティクスに反するため、避けるべきです。可能な限り、正しいHTML構造を保つよう努めることが重要です。

JavaScriptでの対応方法

次にJavaScriptでの対応方法です。内側の<a>タグを<span>タグなどに変更し、JavaScriptでonclickイベントを使用してリンク機能を実装する方法があります。

HTMLの修正

まず、内側の<a>タグを<span>タグに置き換えます。

修正前:

<a href="#">
    <a href="#">リンク</a>
</a>

修正後:

<a href="#">
  <span data-link="#">リンク</span>
</a>

JavaScriptでonclickイベントを追加

次に、JavaScriptを使って、<span>タグにonclickイベントを追加します。<span>タグがクリックされたときに、data-link属性に設定したURLにリダイレクトするようにします。

document.querySelectorAll('span[data-link]').forEach(function(span) {
  span.style.cursor = 'pointer';
  span.addEventListener('click', function(event) {
    event.preventDefault();     // デフォルト動作（親aの遷移）を止める
    event.stopPropagation();    // 親要素への伝播を止める
    window.location.href = this.getAttribute('data-link');
  });
});

このスクリプトでは、<a>タグ内の<span>タグにdata-link属性が含まれている場合、その<span>タグにクリックイベントを追加します。クリックすると、data-link属性に設定されたURLにリダイレクトします。また、視覚的にクリックできることを示すために、cursor: pointer;スタイルを適用しています。

まとめ

今回紹介した2つの方法により、<a>タグ内に別の<a>タグが含まれている場合でも、適切にリンク機能を維持することができます。プロジェクトの要件やHTMLの構造に応じて、最適な方法を選んで実装しましょう。どちらの方法も、リンク機能を損なうことなくサイトを構築するのに役立ちます。