Does <STYLE> have to be in the <HEAD> of an HTML document?

Asked 20/8, 2009 at 0:52 Answered 4/12, 2018 at 23:52

163

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.

Lustrous answered 20/8, 2009 at 0:52 Comment(3)

If you're in doubt, the W3C markup validator always helps :) http://validator.w3.org/ – Dualism 20/8, 2009 at 0:57

One exception to the 'put <style> in <head>' rule is html email, as many webmail services will simply strip out any head elements which means your styles are gone. – Schaaf 8/11, 2011 at 14:6

The specs require browsers to support style in the body, so that's good enough for me, regardless of what's implied by the author guideline sections. – Immersed 29/11, 2017 at 22:23

127

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.

Sheep answered 20/8, 2009 at 1:16 Comment(4)

To the date it seems that only Firefox supports the scoped attribute, see caniuse.com/#feat=style-scoped. – Firsthand 15/10, 2015 at 23:18

The linked article has vanished into the link rot æther, so here's the latest available archived version: web.archive.org/web/20150525042412/http://bluerobot.com/web/css/… – Bedstraw 26/1, 2016 at 22:2

@ZacharyMurray thanks for the heads up! I updated the link in the body to the web archive one. – Haemagglutinate 27/1, 2016 at 1:35

The spec requires conforming browsers to support style tags in the body so, despite the author portion of the spec, I consider body styles to be valid. github.com/whatwg/html/issues/1605#issuecomment-235961103 – Immersed 29/11, 2017 at 22:19

Short answer

According to the current spec, yes, style elements must always be in the head. There are no exceptions (except a style element inside a template element, 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 style elements in the body does 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.

Benitabenites answered 12/8, 2014 at 23:37 Comment(0)

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.

Gamal answered 24/6, 2012 at 22:40 Comment(1)

Should be using HTML5 now, which IIRC has no DTD. What the HTML5 spec alone says is what is or is not. – Sivia 8/2, 2018 at 19:12

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.

Gangrel answered 20/8, 2009 at 0:54 Comment(4)

Saying "they work" is a little bit tricky. At best you can say most current browsers will still render the styles, but there's nothing about this error that just inherently "works." It could not work in any future version of any browser and they wouldn't be doing anything wrong. – Orson 20/8, 2009 at 1:39

imo, styles rendered = works; nothing tricky. that last sentence needs to be rewritten; it makes no sense. i mentioned how it wasn't "right" when i said it wouldn't validate, so i must not understand what you meant by that sentence. – Gangrel 20/8, 2009 at 12:20

The problem is that even if they are styled, you will have some flicker on the content when those styles kick in. – Haemagglutinate 20/8, 2009 at 12:37

unless the style tag is first in the body – Gangrel 20/8, 2009 at 12:47

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.

Castra answered 20/8, 2009 at 1:0 Comment(0)

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:

https://mcmap.net/q/48624/-style-and-script-tags-in-html-body-why-not

Suppletion answered 7/7, 2016 at 21:10 Comment(0)

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)

Petuu answered 4/12, 2018 at 23:52 Comment(1)

Although now, W3C officially state that the WhatWG spec obsoletes all previous specs, and the WhatWG spec doesn't allow style in the body, so we're back to this being unambiguously forbidden. See my answer if you're interested in the twisty path by which we got here. – Benitabenites 25/12, 2019 at 14:23

A style tag anywhere but inside the <head> will not validate with W3C rules.

Callery answered 20/8, 2009 at 0:55 Comment(0)

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.

Blackett answered 31/8, 2016 at 0:6 Comment(0)

-1

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

Protohuman answered 17/8, 2017 at 16:43 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Short answer

Spec history

4.2.6. The `style` element

Categories:

Contexts in which this element can be used:

Recommended topics

Hot tags

Short answer

Spec history

4.2.6. The style element

Categories:

Contexts in which this element can be used:

Recommended topics

Hot tags

4.2.6. The `style` element