HTML & CSS - put <link> tag outside of the <head>
Solution 1
According to the W3 specs, <link>
tags are only supposed to go in the <head>
section:
References
For HTML 4.01: http://www.w3.org/TR/html401/struct/links.html#edef-LINK
For HTML5: http://www.w3.org/TR/html5/document-metadata.html#the-link-element
Validation Issues: Updated October 27, 2017
Back in 2013, if you put a link
tag within the body
of the HTML document, it would not validate using validate.w3.org with rules based on HTML 4.01.
(You can try out HTML 4.01 versus HTML 5.0 validation at https://validator.nu)
On a first reading, the HTML 5.0 specification document seems to imply that link
's should appear only in the head
element of the document. However, if you validate using a HTML 5.0 validator, then the documents appears okay even if you have a link
in the flow content.
The best explanation for this discrepancy may be as follows.
If you read the MDN documentation for the link
entry (MDN Link entry), you see that if the link
element has an itemprop
attribute, then the link
can appear in flow and phrasing content, thus, in the body
.
This may be the reason why HTML 5.0 validators do not issue a warning even if the itemprop
attribute is not present.
The itemprop
is part of the microdata specification and is relatively new (read about HTML Microdata) and it is worth reading.
For the moment, one could add a link
to a stylesheet within the body
, but it is not clear what the advantages are.
Solution 2
This is an old discussion, but I think it's worth noting in here that Google Pagespeed Insights actually now (2017) recommends deferring the loading of large CSS files until below the fold to ensure they don't block loading of html.
Solution 3
WHATWG HTML Standard allows <link>
in the body in quite many specified cases.
As for "reasonableness" of placing <link>
before the </body>
, recently I've used it for preloading some big images in gallery:
<link rel="preload" href="images/big/01.jpg" as="image">
So when user clicked on the thumbnail usually there was no need to wait for server response because image was already loaded into browser cache.
Solution 4
Yes, it's okay with HTML5 specifications to put a link element inside the body element. If it's a bad or good idea depends on what your linking. If it's not crucial to render the first view of your site then I'd consider it a good idea to load it as late as possible.
Solution 5
You must put <!DOCTYPE html>
before any <link>
tags. From experience, it can cause some pages to malfunction.
Comments
-
itsme about 4 years
Is it ok to put the
<link>
to a css file out of the<head/>
tag, for example in the footer side?Which are bad and good results of this?
I ask this, cause actually i have a css file which doesn't styles anything but brings just some css3 animations to my website, so i would like to put it to the end of the html just for performance reason...
thanks
-
itsme over 10 yearsok, clear, so this will trown a standard error validation error right?
-
Matt over 7 yearsI don't see any validation errors for using
<link>
outside of<head>
. -
FKEinternet over 6 yearsWell, that's actually a not good recommendation - it may not block loading of the HTML, but it will prevent accurate rendering of the page until the CSS is loaded - and as @user1864610 pointed out, it will cause the page to be re-rendered when the CSS is loaded - which will increase the perceived page load time.
-
Jonas Äppelgran over 6 yearsThe HTML5 spec doesn't mention that link elements only goes inside the head element. That's a lie. And as Matt is pointing out, the w3 validator for HTML5 as nothing against it either.
-
Marc Audet over 6 yearsAccording to the HTML5 Specification, Section 4.2.4, the
link
element is part of the Metadata Content category and can be used where metadata content is expected, and that is in thehead
element. (See w3.org/TR/html5/document-metadata.html#the-link-element). Thebody
element contains flow content and alink
is not considered to be flow content according to the specification. Based on browser behavior, it may be okay to put alink
within thebody
element, but this is different from stating that the specification allows it. -
Marc Audet over 6 yearsHi Jonas, I did some research based on your comment and I updated my original answer (from 2013) to reflect the new thinking that is coming out of HTML 5.0, thank you for your help!
-
Jonas Äppelgran over 6 yearsMarc: You may be right but I don't see the statement "Where metadata content is expected." defined anywhere. If you compare the spec for
link
withmeta
for example, they explicitly mention that in some casesmeta
can only be used insidehead
. -
Shashank Pandey over 6 yearsThe recommendation is to inline the "CSS necessary to render above-the-fold content".
-
Link14 over 5 yearsI'm trying to find more examples of this use. It makes sense to me to do it that way with HTTP/2, but I didn't find many people talking about it.
-
Nico Haase over 4 yearsCan you explain that further? Why is that neccessary? What makes you think that the OP didn't do that?