Create an anchor tag inside an anchor tag

Question

During my random testing, I saw a behavior in which I put an anchor tag inside another anchor tag. I did jsfiddle .

<a class="groupPopper"> <a class="name"> content</a> </a>​ 

But in the developer tool, it looks different:

I believe that we cannot put the anchor tag in another anchor tag, since clicking on the internal anchor will lead to a click event bubble in the parent anchor tag, which should not be allowed.

Is my assumption correct?

Answer 1

As described in @ j08691, nested a elements are not allowed in the HTML syntax. HTML specifications do not say why; they simply emphasize the rule.

On the practical side, browsers effectively apply this restriction in their parsing rules, so, unlike many other problems, a specification violation just doesn't work. Parsers efficiently process the start tag <a> inside the open element a , as an implicit end to the open element before starting a new one.

So, if you write <a href=foo>foo <a href=bar>bar</a> zap</a> , you will not get any nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap , i.e. Like two consecutive links followed by some plain text.

There is nothing inherently illogical with nested a elements: they can be implemented, so clicking on "foo" or "zap" activates the external link, clicking on "bar" activates the internal link. But I see no reason to use such a structure, and the HTML developers probably did not see it either, so they decided to ban it and thereby simplify things.

(If you really want to simulate nested links, you can use a regular link as an external link and a span element with a suitable event handler as an internal link). Alternatively, you can duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a> .)

Answer 2

Nested links are illegal.

The relationships and bindings defined by element A must not be nested; A element must not contain any other elements of A.

Answer 3

I stumbled upon this problem while trying to make a click pane that also has buttons. The workaround I recommend is to use javascript events.

Here is an example of the code I created .... http://codepen.io/thinkbonobo/pen/gPxJGV

Here is the html part:

An example of a link embedded in a link ....

 <div class=panel onclick="alert('We\'ll hi-ii-ii-ide')"> If you say run<br> <button onclick="app.hitMe(event)">more</button><br> <br> And if you say hide...<br> </div> 

Note that the event for the internal link is fixed and used by stopPropagation (). it is important to make sure the external trigger is not working.

Answer 4

Invalid HTML.

You cannot nest a elements.

Thus, by definition, the behavior is undefined.

Answer 5

You can use the object tag to solve this problem. such as

 <a><object><a></a></object></a> 

Answer 6

I had the same problem as @thinkbonobo and I found a way to do this without JavaScript:

 .outer { position: relative; background-color: red; } .outer > a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .inner { position: relative; pointer-events: none; z-index: 1; } .inner a { pointer-events: all; } 

 <div class="outer"> <a href="#overlay-link"></a> <div class="inner"> You can click on the text of this red box. It also contains a <a href="#inner-link">W3C compliant hyperlink.</a> </div> </div> 

The trick is to create an anchor that spans the entire .outer div, and then give everyone else .outer in the inner div a positive z-index value. Full credit goes to https://bdwm.be/html5-alternative-nested-anchor-tags/

Answer 7

Do not do it like this. I ran into the same problem in my application. You can simply add the <div> in the top and <a> tags at the child level. something like:

 <div id="myDiv"><a href="#"></a> <a href="#"></a> </div> 

make sure you add the click event for myDiv to your script file.

window.location.href = "#dashboardDetails";

Answer 8

You cannot insert 'a' tags. Instead, set the outer container as "position: relative" and "a" as "position: absolute" and increase its z-index value. You will get the same effect.

 <div style="position:relative"> <a href="page2.php"><img src="image-1.png"></a> <a style="position:absolute;top:0;z-index:99" href="page1.php"></a> </div> 

Answer 9

For nested anchors, to prevent an internal event from bursting into an external event, you want to stop propagation as soon as the internal event clicks.

OnClick internal events, use e.stopPropagation ();

Answer 10

This is an old post, but I want to note that user9147812's answer worked better than any other suggestions. This is how I put it all together.

  <style> * { padding: 0; margin: 0 border:0; outline: 0; } .outer_anchor { display: inline-block; padding: 5px 8px; margin: 2px; border: 1px solid #252632; border-radius: 3px; background: #1c1d26; color: #fff; text-shadow: 0 1px 0 #616161; box-shadow: 1px 1px 3px #000; transform: translateY(0); transition: background 250ms; } .inner_anchor { display: inline-block; padding: 5px 8px; margin: 2px; border: 1px solid #252632; border-radius: 3px; background: #1c1d26; color: #fff; transform: translate(0px); } .inner_anchor:hover { background: #647915; } </style> <a href="#">ItemX<object><a class="elim_btn" href="#" title='Eliminate'>&times;</a></object></a> 

Answer 11

Nested links are invalid for the correct HTML syntax. But, nevertheless, if you are trapped and want to use them as a quick solution, you can use something like this:

 <a href="#"> <object> <a href="#"></a> </object> </a> 

Answer 12

 <a href="#"><object> <a href="#">this should do the trick</a> </object></a> 

Answer 13

This is a bad coding method, but you can try this -

<a href = "1" aaaa <table <t> <a> <a> <→ →> </> </td> <; / mp> </ table> </ L; / a>