CODEWITHSUNDEEP
html
no9
no9

Reputation: 6544

Element link is missing required attribute property

<!DOCTYPE html>
...
<link rel='stylesheet' id='basecss-css' href='http://www.someurl.com/modules/14ce1e21/peadig-eucookie.css' type='text/css' media='all' />

Why is the validator (http://validator.w3.org/) rejecting this? What attribute is "required" that I am not aware of?

The error:

Error Line 408, Column 142: Element link is missing required attribute property. …/modules/14ce1e21/peadig-eucookie.css' type='text/css' media='all' /> Attributes for element link: Global attributes href crossorigin rel media hreflang type sizes Also, the title attribute has special semantics on this element.

Upvotes: 79

Views: 72636

Answers (6)

sideshowbarker
sideshowbarker

Reputation: 87984

W3C HTML5 validator maintainer here. As pointed out in another answer, in addition to checking requirements in the HTML5 spec itself, the validator also checks against requirements in the HTML+RDFa 1.1 spec:

http://www.w3.org/TR/html-rdfa/

And while the HTML spec itself says link is normally not allowed in the body＊, the RDFa spec says that if a link element has a property attribute, it is allowed in the body.

So that validator message is basically saying,「The link element is only allowed here if it has a property attribute. But this particular link element doesn't have a property attribute.」

＊ The HTML spec itself does also say that the link element is allowed in the body if it has an itemprop attribute—but only if the link element doesn't have a rel value. (itemprop is “Microdata” attribute whose purpose is basically the same as the RDFa property attribute).

So we have two different attributes that both independently affect where in a document the link element is allowed to appear, and that complicates the checking logic in the validator in a way that makes it difficult to emit a better, more helpful error message for this case.

Upvotes: 15

9ete
9ete

Reputation: 3762

Add 

property='stylesheet'

if you do not want to move your link to the <head> of the document.

<link rel='stylesheet' property='stylesheet' id='basecss-css'  href='http://www.someurl.com/modules/14ce1e21/peadig-eucookie.css' type='text/css' media='all' />

Upvotes: 91

h3nr1ke
h3nr1ke

Reputation: 363

Just for future needs, here is my comment:

In the w3c page we have the following commentary:

If the rel attribute is used, the element is restricted to the head element. When used with the itemprop attribute, the element can be used both in the head element and in the body of the page, subject to the constraints of the microdata model.

So the error can be solved by changing rel for itemprop, because rel is to be used in the head and itemprop can be used in the body.

Hope it helps somebody.

Upvotes: 1

Randy Greencorn
Randy Greencorn

Reputation: 3924

It wants it to be in your head. However, if the css is not too important to load right away, you will get google's pagespeed tool telling you to put it in the bottom of the body.

As an example, I use one of the jquery themes (redmond) to style my autocomplete. No need to put this in the top of my page as it will just slow down everything else.

So, don't worry too much about perfect w3c validation.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The advice from @stevelove is apparently the practical solution, but here’s a theoretical answer to the “why” question:

Although a link element is unconditionally invalid in body in older HTML specifications, HTML5 has more permissive rules. According to HTML 5.1 Nightly (which is more or less what the validator tries to keep up with), the link element is allowed in the document body, too (wherever phrasing content is allowed), provided that it has an itemprop attribute. This seems to make the error message even more puzzling. Part of the explanation is that the validator is actually validating against HTML5 + RDFa, and RDFa defines the property attribute. The problem still remains what specific RDFa definition the validator is checking against, since the definition would need to redefine rules for HTML, too.

The information in the error message is outdated, anyway. Error messages are apparently not updated as fast as the basic functionality of the validator.

Upvotes: 82

stevelove
stevelove

Reputation: 3204

Is your <link> inside the <body>? If so, try putting it in the <head> at the top of the document.

Upvotes: 43

Related Questions