HTML & CSS - put <link> tag outside of the <head>
Style sheets are linked in the <head>
so that the browser can style the HTML and render it as it goes. If you put the style information at the bottom of the document the browser will have to restyle and render the whole document from the top again.
This firstly, takes longer, and secondly, looks really ugly.
This differs from included scripts as scripts will block loading until they are done, so you load them as late as possible in the process.
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.