Does <STYLE> have to be in the <HEAD> of an HTML document?
HtmlCoding StyleHtml HeadHtml Problem Overview
Strictly speaking, do style tags need to be inside the head of an HTML document? The 4.01 standard implies that, but it's not explicitly stated:
> The STYLE element allows authors to > put style sheet rules in the head of > the document. HTML permits any number > of STYLE elements in the HEAD section > of a document.
I say "strictly speaking" because I have an app that puts style elements inside the body, and all the browsers I've tested with seem to use the style elements. I'm just wondering if that's actually legal.
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
Short answer
-
According to the current spec, yes,
styleelements must always be in thehead. There are no exceptions (except astyleelement inside atemplateelement, if you want to count that). -
This has not always been the case historically. If you care about the details of the spec and its history, keep reading.
-
No matter what the spec says, using
styleelements in thebodydoes more-or-less work in all major browsers. However, it is considered a bad practice both because it violates spec and because it can cause undesirable consequences like worse rendering performance or a "flash of unstyled content".
Spec history
style elements didn't exist in HTML 2. They were introduced in HTML 3.0, where they were included in the list of elements that could be included in The Head Element, but not included in the list of elements that could be present in The Body Element. Thus, at the moment the element was first specced, it could only be included in the head.
This remained the case (albeit expressed using different wording) until HTML 5, which introduced the (since removed) scoped attribute for style elements. This attribute, when present, was meant to allow a style element to be placed within an element in the body to style only that element's descendants. However, that feature never made it to any real browser (at least not without needing to be enabled via a developer flag) and was removed from both the W3C and WhatWG specs "due to lack of implementer interest". Thereafter, style elements were only permitted in contexts that allow metadata content, which is only the head. Thus we were back to the same rules as before HTML 5.
However, due to an error made by both spec organisations, a non-normative index of elements included as an appendix in both specs was not properly updated to reflect the removal of scoped, rendering it inconsistent with the normative spec. I pointed this out both to the WhatWG and to the W3C, and in doing so unwittingly set in motion events that caused the two specs to diverge.
WhatWG's solution to the inconsistency between the normative spec and non-normative index was to accept my patch correcting the non-normative index.
The W3C, on the other hand, rejected my equivalent patch in favour of instead updating the normative spec to allow the use of style elements in the body, while caveating this with a note that it can cause problems and should be done "with care". The reasoning behind this change was to make the spec align with real-life browser behaviour.
Thus, from March 2017, it was the case that the official answer to this question depended upon which standards organisation you chose to listen to. If you listed to the (generally more respected) WhatWG spec, then a style element was not allowed in the body. If you listed to the W3C spec, then it was allowed, but not recommended.
This silly state of affairs was ended (perhaps like many other such inconsistencies) with the April 2019 peace treaty between W3C and WhatWG, which agreed that the WhatWG spec would become the one true living HTML standard, with W3C merely releasing snapshots from it as numbered HTML specifications instead of developing a competing spec in parallel. Thus, the change from 2017 to the W3C fork that allowed style elements in the body is no longer part of any current spec; it is merely a curiosity of history.
So, today, we need only look to the WhatWG spec to determine what is officially allowed. It has this to say:
> ## 4.2.6. The style element
>
> ### Categories:
> Metadata content.
> ### Contexts in which this element can be used:
> Where metadata content is expected.
> In a <noscript> element that is a child of a <head> element.
CTRL-Fing through the single-page spec reveals that the only element whose content model includes metadata content is the head element.
The non-normative index of elements I mentioned fixing earlier also confirms that the only permissible parents for a style element are a head or noscript element.
Solution 3 - Html
While the other answers are correct, I'm surprised nobody has explained where the standards disallow styles outside of head.
It's actually in the section on The head Element (and in the DTD):
<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">
<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->
Yes, I know. DTDs are hard to read.
This is the only place where the STYLE element occurs, so implicitly it's invalid elsewhere.
Solution 4 - Html
They aren't supposed to go outside the head, but they work anyway; though you might notice a quick flicker. The site shouldn't validate with the style tag outside of the head, but does that really matter? Also, link tags work outside the head as well, even though they aren't supposed to.
Solution 5 - Html
Like the other replies have stated it doesn't actually need to be there. However, it will not validate. This may or may not matter in this instance, but please keep in mind that rendering of html is entirely up to the browsers. From what I know all used browsers of today will support putting it outside the head, but you cannot guarantee that for the future browsers and future browser releases.
Stick with the standard and you are safer. How much safer is up for very much debate.
Solution 6 - Html
According to this site, HTML5.1 (in draft) and WHATWG allow the <style> tag to be put in the body:
http://www.html.am/tags/html-style-tag.cfm
It also seems to have been supported by browsers for quite a while. According to this StackOverflow answer, Firefox 3+, IE6+, Safari 2+ and Chrome 12+ support it:
Solution 7 - Html
The HTML5.2 W3C Recommendation, 14 December 2017 (not the earlier draft referred to above) now says you can include <style>.
> "In the body, where flow content is expected." https://www.w3.org/TR/html5/document-metadata.html#the-style-element">(section 4.2.6)
Solution 8 - Html
A style tag anywhere but inside the <head> will not validate with W3C rules.
Solution 9 - Html
According to the HTML 5.2 specification (in draft), the style tag is only allowed in the head of a document.
HTML 5.2 Draft on Style Tag (Aug 18, 2016)
> A style element is restricted to appearing in the head of the > document.
Solution 10 - Html
You can use style tag inside head section or body section or also outside of html tag also(out side html is not recommended). In real time projects many time you can see they use style tag out side of html tag