Menu
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.
807
Nesting tags can take on many different forms and can be complex. For example, some tags allow multiple tags or multiple occurrences of the same tag to be nested, while other tags do not allow nesting of any tags. You can also nest levels of certain tags, that is, nested tags within other nested tags.
You can't put <div> inside <a> - it's not valid (X)HTML.
The other day I posted an image, quite literally as a thought exercise, about how you might accomplish “nested” links. That is, a big container that is linked to one URL that contains a smaller container or text link inside of it that goes to another URL. That's harder than it might seem at first glance.
An anchor tag is an inline element, so it can contain other inline elements (except other anchor tags). If you want to put a block element inside an anchor, you have to use an inline element and turn it into a block element using CSS, along with the anchor tag itself.
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.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
