79
<!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.

Volker E.
  • 5,443
  • 11
  • 43
  • 62
no9
  • 5,794
  • 23
  • 72
  • 110
  • I [can't reproduce](http://validator.w3.org/check?uri=http%3A%2F%2Fdorward.me.uk%2Ftmp%2Fjkljiff.html&charset=%28detect+automatically%29&doctype=Inline&group=0) that error message. – Quentin Aug 31 '13 at 15:35
  • its weird ... but the validator is throwing the error anyways. – no9 Aug 31 '13 at 15:40
  • Presumably there is some context you are missing from your question. – Quentin Aug 31 '13 at 15:50
  • 1
    perhaps its the problem because its not in the header? – no9 Aug 31 '13 at 15:50
  • @no9: As Jukka explained below (and which answer should be indicated as *the* answer, this way you can have a inside the as well: ``. Works in all browsers, and validates. It's all about the attribute `property`. – Frank Conijn May 09 '14 at 21:47

6 Answers6

91

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' />
Chloe
  • 21,167
  • 37
  • 143
  • 289
9ete
  • 3,432
  • 1
  • 31
  • 31
82

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.

Jukka K. Korpela
  • 178,198
  • 33
  • 241
  • 350
43

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

stevelove
  • 3,154
  • 1
  • 20
  • 28
  • 4
    Validation aside, you should always put stylesheets at the top of the document to avoid blocking the rest of the page from rendering, as described here: http://developer.yahoo.com/performance/rules.html#css_top – stevelove Aug 31 '13 at 16:59
  • 10
    @stevelove (one year later/for future reference) That's not often optimized. In the best of all possible worlds, you should put critical above-the-fold css in ` – Ludovic Guillaume Sep 25 '14 at 09:41
15

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.

sideshowbarker
  • 62,215
  • 21
  • 143
  • 153
1

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.

T3KBAU5
  • 1,813
  • 18
  • 24
h3nr1ke
  • 305
  • 5
  • 19
  • 2
    I have found another way to solve it, you can combine rel and property in the same tag, for instance `` – h3nr1ke Dec 15 '14 at 03:58
0

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.

Randy Greencorn
  • 3,554
  • 2
  • 20
  • 15