Creating anchor tag inside anchor tag

During my random testing I saw a behavior where I put an anchor tag inside another anchor tag. I made a jsfiddle.

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

But in the developer tool it appears different:

I believe we cannot put an anchor tag inside another anchor tag as clicking on the inner anchor will bubble up the click event to the parent anchor tag which should not be allowed.

Is my assumption correct?

As @j08691 describes, nested a elements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.

On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won’t work. The parsers effectively treat an <a> start tag inside an open a element as implicitly terminating the open element before starting a new one.

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

There is nothing inherently illogical with nested a elements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don’t see a reason to use such a structure, and the designers of HTML probably didn’t see one either, so they decided to forbid it and thereby simplify things.

(If you really wanted to simulate nested links, you could use a normal link as the outer link and a span element with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)

Nested links are illegal.

> Links and anchors defined by the A element must not be nested; an A > element must not contain any other A elements.

I had the same issue as @thinkbonobo and found a way to do it 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 make an anchor covering the whole .outer div, then giving all other anchors in the inner div a positive z-index value. Full credit goes to https://bdwm.be/html5-alternative-nested-anchor-tags/

you can use object tag to solve this problem. such as

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

I stumbled upon this issue when trying to make a div panel clickable by also have buttons. The workaround that I recommend is to use javascript events.

Here is a codepen example I created.... http://codepen.io/thinkbonobo/pen/gPxJGV

Here's the html portion of it:

Example of link embedded in 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>

Notice how the event for the inner link is captured and stopPropagation() is used. this is critical to make sure the outer trigger doesn't run.

It is invalid HTML.

You can't nest a elements.

So, by definition, the behaviour is undefined.

For nested anchors, to prevent the inner event from bubbling up to the outer event, you want to stop propagation as soon as the inner event is clicked.

OnClick of inner event, use e.stopPropagation();

Don't do it like that. I was facing the same issue in my app. You can simply add <div> tag in top and <a> tags at child level. something like:

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

make sure you add click event for myDiv in your script file as well.

window.location.href = "#dashboardDetails";

You cannot nest 'a' tags. Instead set outer container as 'position:relative' and second 'a' as 'position:absolute' and increase its z-index value. You'll 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>

I know It's an old post, but I want to point out that user9147812 answer worked better than any other of the suggestions. This is how I stacked the whole thing.

    <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>

This is a bad way of coding but you can try this -

<a href="1">aaaa <table><tr><td><a href="2">bbbb </a></td></tr></table> </a>