109

Possible Duplicate:
What's the difference if I put css file inside <head> or <body>?

usually, external css file loading code is put on header of html.

<head>

...
<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
...

</head>

but, sometime I should put my css loading code in body tag, I mean..

<body>
...
<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
...
</body>

so my question is, is it okay to put my css loading code in body tag?

Community
  • 1
  • 1
Jinbom Heo
  • 7,248
  • 14
  • 52
  • 59

1 Answers1

-2

No, it is not okay to put a link element in the body tag. See the specification (links to the HTML4.01 specs, but I believe it is true for all versions of HTML):

“This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times.”

Daan
  • 6,952
  • 4
  • 29
  • 36
  • 142
    In HTML5 it's totally OK to put a `` or ` – Vilx- Dec 17 '12 at 12:04
  • 5
    @Vilx - Curious: Can you provide a link to where the spec says it's OK? – Luke Jun 25 '13 at 18:48
  • 2
    @Vilx-, Scoped style has virtually no browser support at the moment. Hopefully that changes in a few years! http://caniuse.com/#search=scope – Brad Jun 25 '13 at 19:20
  • 35
    @Vilx- In HTML5, `link` can only be used within the body if it uses the `itemprop` attribute instead of `rel`. [Spec Reference](http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-link-element) – Sri Kadimisetty Aug 18 '13 at 08:29
  • 13
    the direct quote: `If the rel attribute is used, the element is restricted to the head element. 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.` – Christoph Apr 15 '14 at 13:44
  • 1
    @sri, How do we use the itemprop to load a CSS file? – Pacerier May 07 '14 at 03:20
  • 2
    @Pacerier, check answer of this [thread](http://stackoverflow.com/questions/6236097/is-link-not-rel-stylesheet-allowed-to-be-used-in-body) – Ravi Dhoriya ツ Jun 04 '14 at 09:45
  • 1
    @Vilx- your comment about scoped css got me very excited! However it is only supported by one browser. :( http://www.w3schools.com/tags/att_style_scoped.asp – Will Jun 10 '15 at 10:21
  • @Will - Yes, there is that. :( On the other hand, all browsers currently support putting ` – Vilx- Jun 10 '15 at 11:12
  • The body-ok keywords defined by this specification are prefetch, and stylesheet. – Gqqnbig Mar 22 '17 at 04:46
  • 2
    @sri @Ravi Dhoriya The current specs make no mention of `itemprop` - just that the elements in rel must be 'body-ok'. – Stefan May 06 '17 at 21:05
  • 1
    I'm going to put link elements in the body now, if only to piss off the standards zealots. – John Aug 19 '17 at 12:33
  • @sri `itemprop` is not working for me today. But `rel` is doing the job. – Qback Dec 21 '18 at 16:39
  • 13
    @Pacerier you can use `` directly in `` tag, cuz the `stylesheet` type is `body-ok`. you can read https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#targetText=A%20element%20can%20occur,is%20permitted%20in%20the%20body. or https://html.spec.whatwg.org/multipage/links.html#body-ok – LCB Aug 02 '19 at 07:02
  • 1
    @Vilx- Your comment should be an answer to the question. I would vote for it! – snibbets Oct 31 '19 at 23:50
  • 1
    @SriKadimisetty Wrong. The spec specifies that it is allowed, even when you use the `rel` attribute: "_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._" => So, it's even allowed when the `rel` attribute contains only keywords that are body-ok. Allowed attributes are listed [here](https://html.spec.whatwg.org/multipage/links.html#body-ok): "_The body-ok keywords are dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, prerender, and **stylesheet**._" – Martin Braun Jan 13 '21 at 20:22
  • @MartinBraun Spec changed. As I apparently linked to a living doc instead of a static one. Diffing the current spec with this part of quote in Christopf's comment made at the time should attest that it was true then — “If the rel attribute is used, the element is restricted to the head element … ”. As of today the spec (updated Jan 12 '21) reads “If the rel attribute is used, the element can only sometimes be used in the body of the page …” I should have tracked down and used a static link back then. – Sri Kadimisetty Jan 13 '21 at 20:51
  • 1
    @SriKadimisetty Alright then, I thought it is static. Thanks for clearing this up. So to sum things up: It's allowed to put a `link` element in the `body` with `rel="stylesheet"`. The question is just: Will it remain this way? – Martin Braun Jan 15 '21 at 17:27