How to have an anchor tag inside another

Question

I have read other questions (1, 2) asked on this site and how it is said that it is not possible to have an anchor inside another anchor, however I recently saw a website that is achieving this and I want to know how it's done.

You can see in the following website link where there are cards and each card is a link (whole thing wrapped in an anchor tag), but there are also other links inside the card.

https://opensea.io/collection/clonex

Looking at the HTML, you can see that there are actually two anchor tags (one nested inside the other). So this is not some JavaScript hack.

When I try the same HTML, the browser destructures my anchor tags. Anyone knows how this website manages to do this?

There's [multiple ways](https://css-tricks.com/nested-links/) it's just generally not the best practice semantically. — Chris W., Feb 08 '22 at 19:35
See `event` badges along both the ``? It's definitely a javascript hack =)) — Kosh, Feb 08 '22 at 19:38
It's invalid HTML, and as such, inacceptable. Any "solutions" that "make it work" rely on unspecified behaviour, which can change at any point in time. It doesn't matter if it works or not. — connexo, Feb 08 '22 at 19:46
What are you trying to achieve? What is the expected behaviour when clicking on the nested link? — Ingo Steinke, Feb 11 '22 at 12:52

score 0 · Answer 1 · answered Feb 09 '22 at 01:58

According to https://css-tricks.com/nested-links/, you can possibly do that by just simply putting an anchor within an anchor by doing what is said

#one {
  background-color: yellow;
}

#two {
  background-color: lightgreen;
}

<a id="one" href="#linkone">
  Some text...
 <!--You can add a <br> tag here if you want-->
  <a id="two" href="#linktwo">
    Some more text...
  </a>
</a>

<!--The CSS is not necessary but is used to show this example-->

In the snippet above you can see it being done Notice that when you click on the links they are separate.

If it still does not work check your devtools if you do not find a solution you can search the web or browse youtube for an answer that is most clear to you.

score 0 · Answer 2 · answered Feb 09 '22 at 05:46

You can achieve same functionality by using click event on the card and show cursor as pointer:
Demo Codesandbox

goodCard.addEventListener('click', (e) => window.open(`https://www.google.com/`));

footLink.addEventListener('click', (e) => e.stopPropagation());

.card {
  padding-bottom: 20px;
  width: fit-content;
  font-size: 100px;
  background-color: rgb(251, 233, 199);
  position: relative;
  
  cursor: pointer;
}

.foot {
  position: absolute;
  bottom: 0;
  background-color: lightblue;
  width: 100%;
  font-size: initial;
}

<div id='goodCard' class='card'>
  
  <a id='footLink' href="http://www.gmail.com" target="_blank">
    <footer class="foot">Good Card</footer>
  </a>
</div>

For the demo I've used window.open(). If you are using some framework then you need to do it as the framework expects e.g. in react do this.

If you are curious about how to get anchors inside an anchor, then you can do it using javascript. See the demo link provided above. As everyone has already stated it's a bad idea. Don't do it.

How to have an anchor tag inside another

2 Answers2