htmltagsdtd

Why are nested anchor tags illegal?


I learned that nesting anchor tags is not standards compliant HTML.

From W3:

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.

It would seem like alternatives such as those suggested in the selected answer in this question would have more of a chance of creating unexpected behavior than simply nesting the anchors would!

It also seems like overkill to make onclick event handlers just to redirect the page in JS. Not to mention using a script solution would cause problems for users browsing with scripts disabled.

EDIT

What is interesting was that I was working on a fiddle to demonstrate and I had overlooked that chrome was actually restructuring the DOM as such:

<div id="container">

    <a href="http://yahoo.com"></a>
    <div class="parent">
        <a href="http://yahoo.com">Parent Element</a>
        <a href="http://google.com">
            <div class="child">Child Element</div>
        </a>
        <a href="http://bing.com">
            <div class="child">Other Child</div>
        </a>
    </div>

</div>

I overlooked this because I saw the hover working and had my mouse on the text. Knowing this now doesn't necessarily change my question, but it sure does illustrate that it doesn't even work the way I thought.


Solution

  • Update:

    The standards have changed over time, and "anchors" are now pretty much almost universally "links". But the problems with nesting them would still remain. Consider an example:

    <a href="//google.com">
      <div>
        <a href="//microsoft.com">Click here</a> to go to Microsoft's website.
      </div>
    </a>
    

    What happens when you click on "click here"? You'll probably go to microsoft.com, but would it be wrong if you went to google.com instead? After all, you also clicked on that link. (And of course, if you click on "go to Microsoft's website" you'd definitely go to google.com, which is at best confusing to the user.)


    Original, now ancient answer:

    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.