Rectangle 27 0

HTML & CSS put link tag outside of the head?


@SebastianPatten - what's wrong with validate.w3.org? Sometimes it happens that you misplace some tags around(especially easy to do with dynamic websites) and the validator can easily point out such issues. Modern browsers for the most part seem to be pretty smart about such issues, but it doesn't hurt to have as valid of an HTML as possible :)

@SebastianPatten I rarely validate HTML anymore, I just make sure open and close tags are matched. After a while, good and proper syntax becomes second nature.

According to the W3 specs, <link> tags are only supposed to go in the <head> section:

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.

For the moment, one could add a link to a stylesheet within the body, but it is not clear what the advantages are.

I don't see any validation errors for using <link> outside of <head>.

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.

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.

The itemprop is part of the microdata specification and is relatively new (read about HTML Microdata) and it is worth reading.

This may be the reason why HTML 5.0 validators do not issue a warning even if the itemprop attribute is not present.

Note
Rectangle 27 0

HTML & CSS put link tag outside of the head?


If a browser has to wait until it reaches the end of a document before it can apply any style information it will likely have to render the page twice - hence it is slower. In your specific case, now you explained it more clearly, there's probably no performance penalty, but if the CSS is relatively small there's probably no performance gain, either.

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 differs from included scripts as scripts will block loading until they are done, so you load them as late as possible in the process.

can you please check my question updated, can you also specify why this takes "longer" ?

Note
Rectangle 27 0

HTML & CSS put link tag outside of the head?


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.

Well, 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.

Note