Can I use <link> tags in the body of an HTML document?

seo html html5 microdata

25,986

Solution 1

Microdata extends HTML5 in a way that link and meta elements can be used in the body, if they contain an itemprop attribute.

If the itemprop attribute is present on link or meta, they are flow content and phrasing content. The link and meta elements may be used where phrasing content is expected if the itemprop attribute is present.

This extension is currently also included in the HTML 5.1 Nightly (Editor’s Draft) (see link element and meta element). But as the Microdata specification became a W3C Note recently, we’ll have to see what happens with this reference.

RDFa 1.1 extends HTML5 in a way that link and meta elements can be used in the body, if they contain a propertỳ attribute.

If the @property RDFa attribute is present on the link or meta elements, they MUST be viewed as conforming if used in the body of the document. More specifically, when link or meta elements contain the RDFa @property attribute and are used in the body of an HTML5 document, they MUST be considered flow content.

So you are not allowed to use any link element in the body, but only those

with an itemprop attribute (for Microdata), or
with a property attribute (for RDFa), or
with a rel value that is defined as "body-ok" (see zgreen’s answer).

Thus your link element can be used in the body:

<body>
<!-- … -->
  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
<!-- … -->
</body>

Solution 2

W3Schools does not set the industry standards on HTML coding. They are simply a 3rd party reference site that is not affiliated with the W3C in anyway. W3Schools and other sites are often wrong when using cutting edge coding technologies such as Schema and Responsive design. When using fairly new code your one stop shop should be W3C as set the compliance standards, and maybe HTML5 Doctor if you need help understanding HTML5 through they are not official but highly respected.

Looking at your code it passes W3C validation without any issues with the link element contained within the <body> </body>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>—
  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
  by <span itemprop="author">J.D. Salinger</span>
</div>
</body>
</html>

SHORT ANSWER: Yes, you can use <LINK> within <body> </body> but as Unor has mentioned in his answer must include itemprop.

Solution 3

This question was asked and answered some time ago, and things have improved a quite a bit since then. You can use <link> tags in the <body> of an HTML document as long as the <link> has a type that is "body-ok".

According to MDN:

A element can occur either in the <head> or <body> element, depending on whether it has a link type that is body-ok. For example, the stylesheet link type is body-ok, and therefore <link rel="stylesheet"> is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your elements from your body content, putting them in the <head>.

According to html.spec.whatwg.org:

If a link element has an itemprop attribute, or has a rel attribute that contains only keywords that are body-ok, then the element is said to be allowed in the body. This means that the element can be used where phrasing content is expected.

body-ok keywords are as follows:

dns-prefetch
modulepreload
pingback
preconnect
prefetch
preload
prerender
stylesheet

Relevant links:

25,986

Edward Touw

Content producer looking to grow HTML skills beyond basic level. Also interested in learning more about CSS and PHP.

Updated on September 18, 2022

Comments

Edward Touw over 1 year
Can I use <link> tags in the body of an HTML page? I tried to find the answer to this question, but found contradictory information.

When adding Schema.org microdata markup to an HTML page, I want to add canonical info in a link tag like this:
```
<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>—
  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
  by <span itemprop="author">J.D. Salinger</span>
</div>
```
I got the example code above from Schema.org. According to them, this is the way to go for people that want to add a canonical reference to an itemprop, but don't want to place a hyperlink on their website.

W3 however clearly states that <link> tags should only be placed within the head section, thus making the Schema.org example invalid.

If I want to stick to correct markup, which advice should I follow?
- unor over 10 years
  
  You are linking to w3schools.com (which has nothing to do with the W3C), not w3.org.
- Edward Touw over 10 years
  
  Ah, yes of course, you're right. Removed the link to W3schools. Thanks.
- Faiz almost 8 years
  
  Here is what happens to SEO: webmasters.googleblog.com/2013/04/…
unor over 10 years

Note that you are linking to a HTML5 draft from 2009. In the current HTML5 CR the relevant definition is not included.
Edward Touw over 10 years

Thanks! So if I understand correctly, I'm allowed to use the <link> tag in the body as long as it contains an itemprop attribute? And as long as the itemprop attribute is included, I can also include href as used in my original question?
unor over 10 years

@EdwardTouw: Yes; you MUST give the href attribute in any case. So as long as the link element has an itemprop attribute, you may use it in the body. Then it no longer is metadata for the whole document (like it would be the case for usual link elements in the head), but a "hidden" element for Microdata.
dan over 10 years

If these are links to your site, please add a disclaimer like "I covered this in my blog here...".
Admin about 2 years

This answer is wrong. zgreens' answer below is correct and includes relevant quotes and links to MDN and the W3C spec.
Admin about 2 years

@FabienSnauwaert: In case you are not aware, at the time of OP’s question (2013), "body-ok" didn’t exist yet, so my answer was accurate back then. Also note that zgreen’s answer is not complete, as it misses the case with the property attribute which I described in my answer. –– Thanks for the notice. I’ll edit my answer to include the additonal cases.