{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 步步皆殇っ 的问题《Does <STYLE> have to be in the <HEAD>》','https://www.manongdao.com/q-15437.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
A style tag anywhere but inside the
<head>will not validate with W3C rules.According to the latest WhatWG and W3C specs, yes,
styleelements must always be in thehead. For a while, the specs included ascopedattribute forstyleelements 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,styleelements 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
styleelements, inside atemplateelement inside thebody, 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:
CTRL-Fing through the single-page spec reveals that the only element whose content model includes metadata content is the
headelement.Meanwhile, the latest W3C draft spec contains exactly identical wording, except that they also list metadata content in the content model of
templateelements. (WhatWG conceptualisestemplates differently and lists their content model asnothing.)The non-normative index of elements in the WhatWG spec confirms that the only permissible parents for a
styleelement are aheadornoscriptelement. (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 thescopedattribute. I have a pull request open to fix it.)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://stackoverflow.com/a/10989663/297793
The HTML5.2 W3C Recommendation, 14 December 2017 (not the earlier draft referred to above) now says you can include
<style>.