[This is related to this question, but not since it's not about email.]
In many cases -- especially when working with a CMS or someone else's framework, it's much easier to embed <style>
tags and <script>
tags in the <body>
than in the <head>
. This seems to work in IE6, IE7 (Windows), Firefox 3.x and Safari (OS X).
Strictly speaking, is this wrong? And if it is, what negative consequences might it cause... aside from being completely ignored in some clients?
Note: Glad everybody wants to talk about DRY and centralizing styles. Imagine for a second that I want to use style tags within a document because they ARE NOT GLOBAL and that I DO NOT HAVE ACCESS TO THE HEAD ON A PER-PAGE BASIS. For whatever reason, be it that the site differs on a page-by-page basis, or a per-paragraph basis or whatever. I'm not interested in it being hard to track down and change. I'm worried about possible consequences of using style in the body.
You centralize stuff that's central. Everything else is bloat in the central stylesheets.
Always end with a body tag and make sure every single JavaScript part is within the body tag. You can also have links or scripts inside head tags, but it is not recommended unless you are really certain your JavaScript code is too big to have it inline.
Yay, STYLE is finally valid in BODY , as of HTML5.
Put your functions in the head section, this way they are all in one place, and they do not interfere with page content. Scripts in <body> If you don't want your script to be placed inside a function, or if your script should write page content, it should be placed in the body section.
Although the specs explicitly state style tags are not permitted in the body tag, specs aren't all that matters. Style tags are supported in the body by every major browser, and that's ultimately how users see your site.* While there has long been a drive for better standards and standards support in the browser industry, there's also long been a general push to render broken documents as well as can be.
Google, who leads the HTML5 spec effort, simultaneously maintains google.com which violates specs to save bytes, by leaving the quotes out of its attribute values, using selector hacks against the CSS spec, including script tags with no type or language, and link tags with no type. A purist could argue one of the most used sites on the internet is violating the specs and in serious danger of being horribly misrendered. Or, we can reason that no browser will enter popular use that can't render such widely used hacks on the spec.
So, the question is more of which way the browser industry is going - which again is one of both better specs, but also doing their best to honor the intent of pages that violate those specs. My bet is style tags will keep working in the body for a long time to come.
*As of this writing, style tags in the body are supported with an HTML5 doctype in Firefox 3+, IE6+, Safari 2+, Chrome 12+. Support likely goes back farther but those browsers are rarely seen on the interwebs.
The contexts in which the <script>
and <style>
tags can be used depends on the doctype you're using. For instance, I'll assume you're using the HTML5 doctype:
<!DOCTYPE html>
The script tag has three contexts under the HTML5 doctype:
The style tag has a slightly more complicated context-structure under the HTML5 doctype:
Essentially, this states that you can place the style tag and the script tag in the body, since the body is where we place flow content, and phrasing content.
As always, consult the spec for the doctype you're using.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With