2

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.

ndrix
  • 1,191
  • 12
  • 18
  • Why? Anyway, if the second hyperlink is at the end, just close the first one before it. – Inkbug Jul 22 '12 at 05:48
  • What happens when you click on the inner one? – Blender Jul 22 '12 at 05:48
  • I can't really understand what you have tried to achieve here. – Novak Jul 22 '12 at 05:49
  • Sorry I wasn't too clear; I updated the question. The outer link is merely used by a javascript image carousel. I was wondering if the inner one would take precedence over the outer one. – ndrix Jul 22 '12 at 05:59
  • If the link doesn't point to a specific URL, don't make it a link. Make it a regular `` tag. – Blender Jul 22 '12 at 06:03

4 Answers4

2

Lets think about this. What is the browser suppose to do?

Go to the first hyperlink, or the second one, or both?

If you want the first one, then the second hyperlink is not required.

If you want the second one, then close the first one before and reopen if necessary after closing the second.

If both then write some Javascript to get it to open a new window. for the second hyperlink before loading the first hyperlink.

Ed Heal
  • 59,252
  • 17
  • 87
  • 127
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.

Ryan Atallah
  • 2,977
  • 26
  • 34
  • It doesn't seem it can be done now. Look at your example. Even if you try to nest them, the browser will close the "parent" hyperlink before opening the "child" when rendering the page. (Try inspecting the element or removing the 'child' css) – Alfro Sep 22 '15 at 07:11
0

You can't nest it, but you can do something I did below..

<a href="somewhere">
  This is the hyperlink,</a>
  <a href="somewhere_else">and this is the other one</a>
Shashank Kadne
  • 7,993
  • 6
  • 41
  • 54
0

May be you solution:

<form action="http://myhomepage.ru/" method="get">
  <a href="http://myhomepage.ru/second">second link within</a>
  <button>first link</button>
</form>
Dmitry Shashurov
  • 1,148
  • 13
  • 11