링크 안에 링크를 넣고 싶을 때는?

링크에 링크를 넣고 싶은 레이아웃

이런 레이 아우를 본 적이 있습니까?

업무로 이런 레이아웃으로 구현하지 않으면 안되고, 어떻게 할지 여러가지 조사했으므로, 정리하려고 생각합니다.

a 태그 안에 a 태그를 설치하고 본다

sample.html

<a>
<p>
   <a>リンク</a>
</p>
</a>

해보면


그리고 레이아웃이 무너졌습니다.

대책 1:Object 태그로 둘러싸기

sample.html

<a>
<p>
   <object><a>リンク</a></object>
</p>
</a>

object 태그란?

HTML 요소는 이미지, 내부 탐색 컨텍스트, 플러그인에 의해 처리되는 리소스 등과 같이 처리되는 외부 리소스를 나타냅니다.
참조

속성은 HTML5에서 폐지된 것도 많기 때문에 주의입니다.
주요 브라우저에는 대응하고 있으므로, 사용할 수 있을 것 같네요,,,.

대책 2 : 자바 스크립트 클릭 이벤트 사용

sample.html

<a>
<p>
   <span data-url="/link" class="js-click">リンク</span>
</p>
</a>

$('.js-click').on('click', function(event){
  //伝播をストップ
  e.stopPropagation();
  e.preventDefault();

  //リンクを取得して飛ばす
  location.href = $(this).attr('data-url');
})

인용
여기의 구현은, 구현 환경에 따릅니다 때문에, 인용시켜 주었습니다.
location.href를 사용하는 느낌입니다.

SEO는 괜찮습니까?

google 사이트 를 보는 한, js를 읽어 줍니다만, 이벤트로 생성되는 링크까지를 읽어 주는지는 불확실합니다.
조사해 보면
- htps //w w. 스즈키케치. 이 m / b ぉ g / 혼텐 t an d ぃ k 콘텐 t an d ぃ k /
- htps //w w. 스즈키케치. 이 m / b ぉ g / 굿 g ぇ ㅇ ㄔ ゔ ゔ ぁ sc 리 pt an d 밧
- ぇtps://우ぇb단. 예 mp rs. 이. jp/에/2019/10/07/34043#도 z16
라고 하는 기사도 있어, 렌더링 되는 것 같은 링크라면 읽어 줄 것 같습니다만,,,.
"local.href"는 모르겠습니다.

a 태그 안에 a 태그를 쓰는 것은 NG ×

참조 을 읽을 때 허용되는 부모 요소에

설명 콘텐츠를 수락하는 모든 요소, 흐름 콘텐츠를 수락하는 모든 요소. 그러나 요소를 제외합니다.

라고 써 있습니다.
a 태그 내에서 a 태그를 작성하는 것은 좋지 않을 것 같습니다.

결국 링크 안에 링크를 넣고 싶을 때는?

먼저 레이아웃 변경을 고려하십시오

좋을까라고 생각합니다.

링크 안에 링크를 넣으면, 사용자가 잘못 클릭해 버리는, 잘못해 탭 해 버릴 가능성도 높네요.