Is <link> (not rel="stylesheet") allowed to be used in <body>?

Asked 4/6, 2011 at 10:7 Answered 6/3, 2020 at 15:58

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?

Laritalariviere answered 4/6, 2011 at 10:7 Comment(6)

After exploring a number of Google API's, I found out they are indeed very good at breaking standards. – Astyanax 4/6, 2011 at 10:9

Try validator.w3.org or validome.org – Fauve 4/6, 2011 at 10:11

It can be confusing because of the similar names (no accident), but w3schools is not generally regarded as a reliable source. – Xanthous 4/6, 2011 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). – Laritalariviere 4/6, 2011 at 10:51

In HTML5 <head> is an optional element, so w3schools is not up to date on that point alone. – Gyrostatic 13/8, 2011 at 18:4

Please dont listen to w3schools.org, they ignore standards and worse, ignore attempts to fix their nonstandard docs and examples. Check MDN instead! – Nerveracking 18/5, 2017 at 6:40

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?

Deaconess answered 6/6, 2012 at 22:50 Comment(3)

...but this doesn't work. At least not in any of the browsers I'm trying. Mladen Janjetović's answer works though... – Choli 4/11, 2015 at 16:9

@Choli can you define "doesn't work"? It's not an anchor tag. – Choking 8/2, 2016 at 13:47

The current specification does not say that the rel-version is restricted to head. It depends if the elements in rel are "body-ok". – Feliciafeliciano 19/5, 2016 at 20:57

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

Purlin answered 5/3, 2014 at 10:49 Comment(2)

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). – Scale 8/11, 2014 at 1:0

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?

Deaconess answered 6/6, 2012 at 22:50 Comment(3)

...but this doesn't work. At least not in any of the browsers I'm trying. Mladen Janjetović's answer works though... – Choli 4/11, 2015 at 16:9

@Choli can you define "doesn't work"? It's not an anchor tag. – Choking 8/2, 2016 at 13:47

The current specification does not say that the rel-version is restricted to head. It depends if the elements in rel are "body-ok". – Feliciafeliciano 19/5, 2016 at 20:57

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

Jennijennica answered 4/3, 2016 at 16:53 Comment(0)

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.

Teador answered 18/5, 2015 at 16:16 Comment(0)

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.

Highspeed answered 17/9, 2018 at 11:59 Comment(2)

downvote, because my question is specifically about "not stylesheet" link elements. – Laritalariviere 17/9, 2018 at 16:16

upvote, because it was exactly what I needed after searching related things :) – Concubine 7/2, 2019 at 12:36

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>

Elburr answered 20/6, 2018 at 11:6 Comment(0)

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.

Layamon answered 6/3, 2020 at 15:58 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags