Does <STYLE> have to be in the <HEAD> of an HTML document?
https://stackoverflow.com/questions/1303416
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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.
Solution
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.
OTHER TIPS
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.
According to the latest WhatWG and W3C specs, yes, style elements must always be in the head. For a while, the specs included a scoped attribute for style elements which, when present, allowed them to be placed within an element in the body to style only that element's descendants... but 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 specs "due to lack of implementer interest". Consequently, style elements are now only permitted in contexts that allow metadata content, which is only the head.
(Okay that's not quite true - you can legally put metadata content, including style elements, inside a template element inside the body, but it won't actually take effect if you're in a browser that supports templates. This is really just a silly technicality.)
The WhatWG spec has this to say:
4.2.6. The
styleelementCategories:
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.
Meanwhile, the latest W3C draft spec contains exactly identical wording, except that they also list metadata content in the content model of template elements. (WhatWG conceptualises templates differently and lists their content model as nothing.)
The non-normative index of elements in the WhatWG spec confirms that the only permissible parents for a style element are a head or noscript element. (The W3 version of the same index wrongly states that flow content can contain <style> elements, but this is an error introduced by the W3C at the time of removing the scoped attribute. I have a pull request open to fix it.)
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.
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.
A style tag anywhere but inside the <head> will not validate with W3C rules.
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." (section 4.2.6)
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:
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.
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
