30

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?

Improve this question
3
  • You are linking to w3schools.com (which has nothing to do with the W3C), not w3.org.
    – unor
    Commented Nov 13, 2013 at 16:48
  • Ah, yes of course, you're right. Removed the link to W3schools. Thanks.
    – Edward Touw
    Commented Nov 13, 2013 at 20:08
  • Here is what happens to SEO: webmasters.googleblog.com/2013/04/…
    – Faiz
    Commented Jul 28, 2016 at 8:48

4 Answers 4

Reset to default
26

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>
Improve this answer
4
  • 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?
    – Edward Touw
    Commented Nov 13, 2013 at 20:16
  • @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.
    – unor
    Commented Nov 14, 2013 at 9:10
  • This answer is wrong. zgreens' answer below is correct and includes relevant quotes and links to MDN and the W3C spec.
    – Fabien Snauwaert
    Commented Apr 28, 2022 at 16:10
  • @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.
    – unor
    Commented Apr 29, 2022 at 17:31
12

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.

Improve this answer
1
  • Note that you are linking to a HTML5 draft from 2009. In the current HTML5 CR the relevant definition is not included.
    – unor
    Commented Nov 13, 2013 at 16:50
4

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:

Improve this answer
0

The link element can be added to the body of an HTML document if the itemprop attribute is present. Here's a demo.

Also here's a link itemprop attribute example.

Improve this answer
1
  • 2
    If these are links to your site, please add a disclaimer like "I covered this in my blog here...".
    – dan ♦
    Commented Feb 6, 2014 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.