Is it correct to use the <style> tag outside of the <head> element?
According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style :
"<style>-element can be included inside the <head> or <body> of the document, and the styles will still be applied, however it is recommended that you include your styles in the <head> for organizational purposes"
I think the key-phrase here is "for organizational purposes". So it's not a technical requirement but advise which purports to make your html-source more readable.
The above linked-to page is "Last modified: Jun 4, 2019, by MDN contributors"
style is supposed to be included only on the head of the document.
Besides the validation point, one caveat that might interest you when using style on the body is the flash of unstyled content. The browser would get elements that would be styled after they are displayed, making them shift on size/shape/font and/or flicker. It is generally a sign of bad craftsmanship. Generally you can get away with putting style anywhere you want, but try to avoid it whenever it is possible.
HTML 5 introduced a scoped attribute that allowed style tags to be included everywhere in the body, but then they removed it again.
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
If you put a tag within the body of the HTML document, it will not validate using validate.w3.org
<style>
tags can be anywhere in the HTML Document. However, it is best to have it inside the <head>
.
From my personal experience, its best to just make a separate stylesheet to put all the CSS in.