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

问题

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?

回答1:

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?

回答2:

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

回答3:

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

回答4:

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.

回答5:

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>

回答6:

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.

来源：https://stackoverflow.com/questions/6236097/is-link-not-rel-stylesheet-allowed-to-be-used-in-body

标签

html5

w3c-validation

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