HTML 内のネストされたリンク: 許可されるかどうか?

リンクのネスト: 許可されていますか?禁止されていますか?

Web 開発では、よくある質問が生じます: リンクを別のリンク内にネストすることは許可されますか?

W3C HTML4スタンス

W3C HTML4 ガイドラインによれば、リンクの入れ子は禁止されています。 A 要素には他の A 要素を含めることはできません。

HTML5 の観点

HTML5 では、ルールが若干進化しています。リンクのネストは依然として許可されていませんが、アンカー タグ (A 要素) を含むインタラクティブ コンテンツを A 要素内に配置することはできないという新しい制約があります。

ベスト プラクティス

これらの制限にもかかわらず、特定のレイアウトでは、複数のクリック可能な領域を含むクリック可能な領域が必要になる場合があります。

代替アプローチ

• CSS の使用: クリック可能な領域を親要素に割り当て、CSS を使用して適切なリンクのスタイルを設定する動作。
• JavaScript の使用:イベント ハンドラーを使用してクリックをキャプチャし、ターゲット要素に基づいて意図されたアクションを決定します。

例

指定されたコード スニペットを考えてみましょう:

<a href="#" class="sp_mngt_bar">
    <h1><?php echo $v; ?></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a>
</a>

灰色のバー全体をクリック可能にするには、クリック イベント ハンドラーを親 に割り当てます。要素を指定し、次のように jQuery を使用します:

$('.sp_mngt_bar').click(function(e) {
  if (e.target.className.indexOf('sp_mngt_move') > -1) {
    // Handle move icon click
  } else if (e.target.className.indexOf('sp_mngt_settings') > -1) {
    // Handle settings icon click
  } else {
    // Handle main link click
  }
});