Why can’t <style> tags within the HTML <body> tag validate on W3C? [duplicate]

Asked 26/1, 2011 at 10:32 Answered 26/1, 2011 at 11:0

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

I am part of a team that has developed a CMS system.

We would like to be able to insert <style> tags within the <body> of an HTML page in a way that validates to W3C standards, as validation is a requirement of our SEO consultant.

The style tag functions perfectly well within the body tag across all browsers, yet it refuses to validate.

Progression answered 26/1, 2011 at 10:32 Comment(1)

“as validation is a requirement of our SEO consultant” — I think I’ve spotted your problem, right there in the last two words of that sentence. – Markitamarkka 26/1, 2011 at 10:45

The HMTL DTD does not allow it, therefore it doesn't validate. Doesn't matter, all browsers support it anyway.

Lated answered 26/1, 2011 at 10:35 Comment(5)

And they all behave consistently for wherever the style element is placed within the body? – Wisniewski 26/1, 2011 at 11:25

From my experience from ie4 (even Netscape 4) up to modern browsers the style tag can be placed anywhere in the body. However i do not know if this works for strict doctpes. – Lated 26/1, 2011 at 14:17

The spec that suggests style not belonging in the body also requires conforming browsers to support it. This sounds to me like it's in the spec and supported, regardless of goofy pseudo prohibitions on authors. So, yes, "Doesn't matter" what the validator says. github.com/whatwg/html/issues/1605#issuecomment-235961103 – Toffee 29/11, 2017 at 22:21

@Toffee That's a great discussion. Should be included in the/an answer. Quoting, "I agree with making style in body valid HTML 5. It shouldn't require a HTML 5 conformance checker to make devs realize that this is bad practice in general. Every web dev knows that style is usually part of the head. However sometimes it can't be avoided. It should be valid." github.com/whatwg/html/issues/1605#issuecomment-239589260 – Fronnia 12/7, 2018 at 8:37

@Toffee And the next comment, "Another use case for <style> in the body of a document would be User/CMS-generated content. For example, a client would like to control the background image for a container....they upload an image to a CMS and the server generates background images automatically and dynamically outputs the content in the <style> tag to support multiple background images appropriate for certain screen sizes." – Fronnia 12/7, 2018 at 8:39

The HTML 4 spec states that is supposed to be within the HEAD element, not the BODY element. See also this related (duplicate?) question

does-style-have-to-be-in-the-head-of-an-html-document

W3C HTML 4.01 ref on <style>

HTML permits any number of STYLE elements in the HEAD section of a document.

Wisniewski answered 26/1, 2011 at 10:36 Comment(0)

<style> elements contain meta data that applies to the whole document. This is what the <head> element was designed to contain. It just makes sense for them to live in the head, so that is where the specification requires that they be.

Charente answered 26/1, 2011 at 11:0 Comment(0)

Literally, a <style> tag within the <body> tag won’t validate because all the HTML specs say it can’t be there.

As to why the specs say that, I don’t know. The requirement is still in the latest HTML spec, and recently things that work in the real world that were forbidden by previous specs (e.g. omitting the type attribute on the <style> tag) have been allowed, so I’m assuming there must be a reason why the requirement is still there.

I imagine there are some cases where including a <style> tag in the body makes page rendering harder/slower/less reliable.

Markitamarkka answered 26/1, 2011 at 10:54 Comment(1)

It occurs to me that selector-based styling might be undefined for things in the body. Would the styles still apply to the entire document, or only going forward from the <style> tag? My hunch is that most browsers would still apply the selectors to the whole document, which may be counter-intuitive. In that case, it also leads to an issue where partially-loaded pages would display styles incorrectly until all of the style tags had finished loading. – Polemics 7/2, 2012 at 19:4

What are you validating against? HTML, XHTML Transitional, XHTML strict?

Probably because inline styles are not valid in XHTML Strict. You need to use class="foo" instead, and define foo inside a CSS file.

Deenadeenya answered 26/1, 2011 at 10:36 Comment(1)

I think he means <style> tags inside the <body> tag, not style attributes. – Markitamarkka 26/1, 2011 at 10:47

Recommended topics

Hot tags