At the outset, it is well-known that the <link>
tag used to connect an external CSS style sheet should ideally be placed within the <head>
section of an HTML document. It is considered unconventional to place it elsewhere.
However, due to my use of head and footer includes for creating modular web designs, I have encountered some scenarios where certain CSS stylesheets need to be applied only to specific pages.
By inserting some <link>
tags within the <body>
section of a particular page, I have observed no major issues so far with modern browsers, except for some glitches in IE - which currently doesn't concern me greatly.
Hence, I must apologize to the HTML purists and pose the question: what are the potential drawbacks of linking CSS external stylesheets outside of the <head>
section?
In my quest for answers, most sources simply reiterate w3schools' advice to "include your CSS stylesheet in the head", without delving into the reasons behind this recommendation: Are <link href=""> tags meant only for the <head> tag?
The concept of "validity" has been suggested as one reason, but what exactly does it encompass? Does it affect search engine optimization? Personally, I fail to see how search engines reading my stylesheets would benefit me in any way...