Drogos Drogos - 1 year ago 58
HTML Question

Is it legal to wrap li in a?

I struggle a bit to understand the documentation here: http://w3c.github.io/html-reference/terminology.html#transparent which is linked to from here: http://w3c.github.io/html-reference/a.html#a-changes

As far as I understand it the following code should be ok:

<!doctype html>
<li>My list item is wrapped in an anchor.

But when I paste this code in different validators, they all agree that the li element can not be wrapped in an a element like this. Am I reading the documentation wrong, or is all the validators I found outdated?

Answer Source

First of all, you are not using a HTML specification. http://w3c.github.io/html-reference/ is just a "non-normative reference", and outdated (it’s a draft from 2012).

The HTML5 specification (which is currently the latest HTML W3C Recommendation) is https://www.w3.org/TR/2014/REC-html5-20141028/. HTML 5.1 is currently a Candidate Recommendation (it will likely be a W3C Recommendation soon).

The following links point to the HTML5 W3C Recommendation.

The content model of the a element is transparent. The content model explains what other elements the a element may contain. In the case of transparent, it means that the parent element’s content model will be used. But the content model says nothing about where the a element may appear.¹

The "contexts in which this element can be used"² lists where the element may appear. In the case of a, it’s:

Where phrasing content is expected.

So you can use a wherever you would also be allowed to use text, abbr, span etc. Note that the li element is not listed here (li is not phrasing content).

See the content model of the ul element: it only allows li and "script-supporting" elements (not a).

¹ Except for a elements nested in an a element, of course. But this is explicitly not allowed: "there must be no interactive content descendant".

² This listing is non-normative (only provided for convenience). You can see the normative contexts by checking each possible parent’s content model.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download