anchor inside span inside anchor, in chrome - google-chrome

Question

i'm having an issue in chrome (and firefox, too, i think)
i have a bit of html that looks like this:
<a id="outside">
<span id="middle>
:contents
</span>
</a>
if :contents evaluates to a string or a tag other than an anchor, it renders as intended;
<a id="outside">
<span id="middle">
inside
</span>
</a>
or
<a id="outside">
<span id="middle">
<div id="inside"></div>
</span>
</a>
however, if it evaluates to an anchor, it renders as follows:
<a id="outside">
<span id="middle>
</span>
</a>
<a id="inside"></a>
the anchor is jumping outside the span. why? what can i do to fix this?

Answer 1

To fix it, you have to make sure that you never embed an anchor tag insider another anchor tag - results are unpredictable as it is not standards compliant.
If you have control over the generated code, make sure you tidy up that HTML by substituting that top level anchor with something that can contain both a div and a a tag - perhaps another div element?
References:
http://www.w3.org/TR/html401/struct/links.html#h-12.2
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element
http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

Answer 2

This is likely happening because your browser is trying to 'fix' your illegal HTML. According to the W3 documentation:
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.
Here is the link to the documentation: http://www.w3.org/TR/html4/struct/links.html#h-12.2.2