Question

Probably a silly questions, but I’d like to have a hyperlink withing another hyperlink, much like a

<a href="#somewhere">
  This is the hyperlink,
  <a href="somewhere_else.html">and this is the other one</a>
</a>

Aside from that it’s not compliant and all, is there a way of doing this?

*Edit: the outer hyperlink is used by a carousel, and won’t take the browser somewhere.

Answer 1

Anchor tags, just like inline or block level elements, layer up on top of each other when nested such that attributes can be set for different subsets of information or visual space within them. This may be useful if you have a large anchor element functioning as a large button, but want to insert a link to a different location within that button.

Have you tried implementing it? See this jsFiddle proving that nested inline elements work, both with span and anchor tags. Note that the nested element overrides the clickable area subset within the parent element, just as you’d expect it to if you were listening for a hover event.

Disclaimer: While technically this can be done, that doesn’t mean that it should be done. Nesting links in particular can result in user confusion and be misleading about what content is pointing to what locations.