Is <link> (not rel="stylesheet") allowed to be used in <body>?
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?
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
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?
There was a change to HTML5 spec recently that allows having links in the body
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.
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.
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>
The specification as of March 2020:
If the
relattribute is used, the element can only sometimes be used in thebodyof the page. When used with theitempropattribute, the element can be used both in theheadelement and in thebodyof 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.
加载中,请稍侯......
精彩评论