Is (not rel="stylesheet") allowed to be used in ?

Question

The new schema.org by Google, Yahoo and MS recommends usage of the <link> attribute to display the status of products in an online shop:

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <link itemprop="availability" href="http://schema.org/InStock"/>Available today!
</div>

Yet, according to w3schools.org <link> is only allowed in head sections:

Note: This element goes only in the head section, but it can appear any number of times.

I am not used to W3C style, so I was not able to understand the exact definition by W3C. Can anybody help me: Is it really allowed to use <link> within the body (in HTML5, as schema.org uses HTML5 tags) or do Google, Yahoo and MS break the standard?

After exploring a number of Google API's, I found out they are indeed very good at breaking standards. — GolezTrol, Jun 04 '11 at 10:09
It can be confusing because of the similar names (no accident), but w3schools is not generally regarded as a reliable source. — DOK, Jun 04 '11 at 10:16
validome does not support HTML5 yet, but according to validator.w3.org it is considered valid HTML5 (yet, their HTML5 implementation is experimental and I am a bit confused because according to the answer of Mat it should be invalid in HTML5 at least due to missing rel-attribute). — aufziehvogel, Jun 04 '11 at 10:51
In HTML5 `` is an optional element, so w3schools is not up to date on that point alone. — Kit Sunde, Aug 13 '11 at 18:04
Please dont listen to w3schools.org, they ignore standards and worse, ignore attempts to fix their nonstandard docs and examples. Check MDN instead! — Brunis, May 18 '17 at 06:40

Mladen Janjetovic · Answer 1 · 2017-03-31T09:05:46.190

56

Link is allowed in BODY. I had same problem validating link tag in HTML5 and I solved it with this

<link rel="stylesheet" property="stylesheet" href="css/homepage.css">

Need to have both property and rel tag

UPDATE 2016 (thanks to yuyokk below): There was a change to HTML5 spec recently that allows having links in the body

edited Mar 31 '17 at 09:05

answered Mar 05 '14 at 10:49

Mladen Janjetovic

13,844
8
72
82

14

I spent a long time searching for a way to include a css stylesheet ouside of the `head` element and still be valid regarding the W3C's HTML5 validator. This message lost somewhere in the internet saved me, thanks. (I know what you saw, [XKCD](http://imgs.xkcd.com/comics/wisdom_of_the_ancients.png)). – Clément Nov 08 '14 at 01:00
4

didn't work for me, **but in reverse order it did**. Definitely worth noting in case someone tries this but thinks they can do whichever order like I did. Thanks for this answer btw! – NominalAeon Jun 25 '15 at 19:53

score 30 · Accepted Answer · edited Aug 25 '16 at 17:36

30

The WHATWG HTML specification mentions, that the LINK-element can either have a rel-attribute:

<link rel="…" />

or an itemprop-attribute

<link itemprop="…" />

but not both.

The rel-version is restricted to the HEAD-element, whereas the itemprop-version may appear in both, the HEAD and BODY-elements.

http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-link-element

What is this WHATWG specification:

whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?

edited Aug 25 '16 at 17:36

ZachB

13,051
4
61
89

answered Jun 06 '12 at 22:50

feeela

29,399
7
59
71

1

...but this doesn't work. At least not in any of the browsers I'm trying. Mladen Janjetović's answer works though... – Andrew Nov 04 '15 at 16:09
2

@Andrew can you define "doesn't work"? It's not an anchor tag. – Martin Feb 08 '16 at 13:47
9

The current specification does not say that the rel-version is restricted to head. It depends if the elements in rel are "body-ok". – Damien May 19 '16 at 20:57

score 11 · Answer 3 · answered Mar 04 '16 at 16:53

11

There was a change to HTML5 spec recently that allows having links in the body

answered Mar 04 '16 at 16:53

iurii

4,142
2
23
28

score 5 · Answer 4 · answered May 18 '15 at 16:16

I'd like to add to the answers above, in short

<body>
    <link rel="stylesheet" property="stylesheet" href="pathto.css">
</body>

is making the valdation error go away. Even just adding property="" (RDFa syntax or itemprop="" (Microformat syntax) attribute is sufficient. As @Jukka K. Korpela and @sideshowbarker explain in their answers, the reason lies in the HTML5+RDFa 1.1 spec.

The solution above is basically a workaround to let validator ignore inline stylesheets as needed in critical path implementations. In future versions of validators it hopefully gets obsolete.

By the way, in HTML5 you neither need a type attribute nor self-closing tag syntax.

score 2 · Answer 5 · answered Sep 17 '18 at 11:59

2

To make sure the code is cross-browser compatible, rather include your stylesheet like this:

<style>
   @import url(style.css);
</style>

Putting a stylesheet in the body is usually considered bad practice, however it can be helpful in some cases:

You want the style to be loaded prior to other elements
If you include certain frequently occuring website's elements (a contact box, a menu header, etc) by php, you can put the link to the corresponding stylesheet into the php template. Once you include the template, the stylesheet will be automatically loaded without having to add anything to the head section.

answered Sep 17 '18 at 11:59

Akim

29
4

downvote, because my question is specifically about "not stylesheet" link elements. – aufziehvogel Sep 17 '18 at 16:16
2

upvote, because it was exactly what I needed after searching related things :) – w00t Feb 07 '19 at 12:36

score 1 · Answer 6 · answered Jun 20 '18 at 11:06

As noted by the others <link> can be used in the body, but only sometimes. In those cases it's referred to as "body-ok". Here's a list of which link types are body-ok: https://html.spec.whatwg.org/multipage/links.html#body-ok

As of 20 June 2018 the following can be used in the body:

<body>
    <link rel="dns-prefetch">
    <link rel="modulepreload">
    <link rel="pingback">
    <link rel="preconnect">
    <link rel="prefetch">
    <link rel="preload">
    <link rel="prerender">
    <link rel="stylesheet">
</body>

score 0 · Answer 7 · answered Mar 06 '20 at 15:58

The specification as of March 2020:

If the rel attribute is used, the element can only sometimes be used in the body of the page. 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.

which is the opposite to what the accepted answer says as far as the rel attribute is concerned. I have personally never experienced issues by adding rel in the head though.

Microdata is a WHATWG HTML specification used to nest metadata within existing content on web pages. Browsers, web crawlers and in particular search engines can extract and process Microdata from a web page and use it to provide a richer browsing experience for users.

Is (not rel="stylesheet") allowed to be used in ?

7 Answers7

Linked