CODEWITHSUNDEEP
html
Anoop
Anoop

Reputation: 23208

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:

enter image description here

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?

Upvotes: 96

Views: 102490

Answers (12)

j08691
j08691

Reputation: 207861

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.

Upvotes: 27

Dipak Prajapati
Dipak Prajapati

Reputation: 101

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

Upvotes: 0

user5707327
user5707327

Reputation:

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/

Upvotes: 21

Old Sam
Old Sam

Reputation: 53

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>

Upvotes: 1

Adi Sekar
Adi Sekar

Reputation: 41

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();

Upvotes: 0

user9147812
user9147812

Reputation: 221

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

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

Upvotes: 10

Vidhya
Vidhya

Reputation: 507

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>

Upvotes: 0

ThinkBonobo
ThinkBonobo

Reputation: 16505

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.

Upvotes: 4

Rahul Varma
Rahul Varma

Reputation: 1

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

Upvotes: 0

Pragyandipta Tripathy
Pragyandipta Tripathy

Reputation: 39

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>

Upvotes: -5

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

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

Upvotes: 139

Oded
Oded

Reputation: 498904

It is invalid HTML.

You can't nest a elements.

So, by definition, the behaviour is undefined.

Upvotes: 3

Related Questions