Problem
Do style tags have to be in the head of an HTML document strictly speaking? The 4.01 standard indicates this, however it isn’t stated explicitly:
I say “strictly speaking” because I have an app that inserts style elements into the body, and all of the browsers I’ve tried seem to use them. I’m just curious if that’s even legal.
Asked by eaolson
Solution #1
The style should only be used on the document’s first page.
Aside from the validation issue, you should be aware of the flash of unstyled information when putting style on the body. Elements would be stylized after they were displayed in the browser, causing them to fluctuate in size, shape, font, and/or flicker. It’s usually a symptom of shoddy workmanship. You can often get away with putting style wherever you want, but try to avoid it wherever feasible.
HTML 5 introduced the scoped feature, which permitted style tags to appear anywhere in the body, however it was later removed.
Answered by Esteban Küber
Solution #2
HTML 2 didn’t have any style elements. They were first introduced in HTML 3.0, when they were included to the list of elements that may be used in The Head Element but not in The Body Element. As a result, the element could only be used in the head when it was initially specified.
ment to be used within a body element to style only the descendants of that element. However, such functionality was never implemented in a real browser (at least not without the use of a developer flag), and it was deleted from both the W3C and WhatWG specifications “owing to lack of implementer interest.” Style elements were only allowed after that in circumstances that allowed metadata material, which was limited to the head. As a result, we were back to the regulations that existed prior to HTML 5.
However, a non-normative index of components included as an appendix in both specs was not correctly updated to reflect the removal of scoped, making it incompatible with the normative spec owing to an oversight made by both standardization organizations. I informed both the WhatWG and the W3C about this, thereby setting in motion circumstances that caused the two standards to diverge.
WhatWG’s response to the mismatch between the normative spec and the non-normative index was to accept my non-normative index correction patch.
The W3C, on the other hand, rejected my fix in favour of revising the normative spec to allow the usage of style elements in the body, with the caution that doing so can cause issues and should be done “with care.” The goal of this update was to align the specification with real-world browser behaviour.
As a result, as of March 2017, the official answer to this question was contingent on whose standards organization you choose 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.
The April 2019 peace treaty between W3C and WhatWG, which agreed that the WhatWG spec would become the only true living HTML standard, with W3C releasing snapshots from it as numbered HTML specifications rather than developing a competing spec in parallel, put an end to this ridiculous state of affairs (perhaps like many other such inconsistencies). As a result, the 2017 W3C fork that allowed style elements in the body is no longer part of any current specification; it is purely a historical curiosity.
So, nowadays, all we have to do is look at the WhatWG spec to see what is technically permitted. This is what it says:
The only element whose content model incorporates metadata content is the head element, as shown by CTRL-Fing through the single-page spec.
A head or noscript element are the only allowed parents for a style element, according to the non-normative index of items I stated before.
Answered by Mark Amery
Solution #3
While the other responses are right, I’m amazed no one has explained why styles other than head are prohibited by the criteria.
It’s in the part on The Head Element (as well as 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 understand. DTDs are difficult to decipher.
Because the STYLE element appears only here, it is inherently invalid elsewhere.
Answered by user123444555621
Solution #4
They aren’t meant to work outside the head, but they do; you may see a brief flash. Although the style tag should not be used outside of the head, does it really matter? Link tags also work outside the head, despite the fact that they aren’t supposed to.
Answered by geowa4
Solution #5
It doesn’t need to be there, as the previous responses have mentioned. It will, however, not be valid. This may or may not be relevant in this case, however keep in mind that browsers are solely responsible for html rendering. According to what I’ve learned, all currently used browsers will enable putting it outside the head, but you can’t promise it for future browsers or browser updates.
Stick with the standard and you are safer. The question of how much safer it is is hotly debated.
Answered by Louis
Post is based on https://stackoverflow.com/questions/1303416/does-style-have-to-be-in-the-head-of-an-html-document