Why Are Nested Anchor Tags Illegal

Why are nested anchor tags illegal?

Keep in mind that an anchor isn't just a link, it's also something to which one can link. (Though the former use is far more common than the latter.) Quoting W3C (old, but relevant):

An anchor is a piece of text which marks the beginning and/or the end of a hypertext link.

To that end, don't think of an anchor as a link. Think of it as a point in the document which connects to (and/or from) another point (in the same document or another document, it makes no difference). Two points in some non-physical space which are connected by a non-physical thread.

Given that, anchors shouldn't contain a lot of content. If it contains a lot of content, it ceases to become a "point" and starts to become an "area." For example, imagine an anchor which when rendered takes up more space than the browser can display at once. If something links to that anchor, where should it go? The beginning? Middle? End? (Intuitively you might think the beginning, but you get the idea.)

Furthermore, anchors definitely shouldn't contain other anchors. The non-physical connections between the non-physical points can become ambiguous. Does the child anchor connect to the other point, or does the parent anchor connect to the other point? This probably doesn't result in being a big deal in most cases, since the vast majority of anchors today are one-way links from the anchor to another document. But the purpose of the anchor is more than just a one-way link to another document, so the definition continues to embody that purpose.

Are you allowed to nest a link inside of a link?

Straight from the W3C for HTML4:

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

Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.

HTML 5

And for HTML5 it is a little different.

You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.

Alternative to nested anchor tags

You could use CSS or JavaScript. I would recommend just using CSS.

CSS

This works in my Firefox using CSS only. Basically I just made all child links (except the big one) have position: relative and set their z-index to higher than the large background link.

HTML

<div>
    Hello, <a href="http://example.com/hello" class="normal">Bob</a>
    <a href="http://example.com" class="big"></a>
</div>

CSS

div {
    position: relative;
}

.big {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;   
  z-index: 0;
}

.normal {
  position: relative;
  z-index: 1;  
}

JavaScript

Attach a click event to the cell, and an event to all child links. Make sure child links events do not bubble up (stopPropagation()).

Browsers rendering multiple nested a tags

You can't next anchor tags. As the W3 says:

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

CSS - nested anchor tag link

Use a SPAN, since you cannot nest anchor tags.

<a href="#">This is a link <span id="sup">sup text</span> end of the link</a>

Ok I'll use span, but how to make the span having the same propreties
than anchor tag when anchor tag is hover ?

Add the hover state to your CSS for the "sup" element.

a, a:hover #sup {
    font-family: Arial;
    color: #19578e;
    font-size: 10pt;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

If you have this in more than on place, you can simply use:

a, a:hover span { ... }

Creating anchor tag inside anchor tag

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

Is an anchor in nested list invalid or is this a firebug error?

The a element only allows inline-level elements as child elements. So the p element and ul element are not allowed there.

Nesting HTML- anchor tags

They must be doing some really crazy stuff with JavaScript to get it to work (notice how neither the parent nor the nested anchor tags have a name or href attribute - all functionality is done through the class name and JS).

Here is what the html looks like:

<a class="page_tab page_tab">
  <div class="page_title" title="Click to rename this page.">Click & Type Page Name</div>
  <a class="delete_page" title="Click to delete this page" style="display: block;">X</a>
</a>

---

Related Topics