Embedding Tags within <body></strong></p> <p>HTML 4 dictates that <style> tags should be placed within the <head> section. However, most browsers permit their inclusion within the <body> element.</p> <p>Historically, this practice was considered poor programming style. However, the introduction of the scoped attribute in HTML 5 allows for the creation of stylesheets scoped within the parent element of the <style> tag. This enables <style> tags to be placed within the <body> element, providing certain limitations are adhered to.</p> <p><strong>Case Study: Scoped Style</strong></p> <p>Consider the following HTML code:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!DOCTYPE html> <html> <head></head> <body> <div></pre><div class="contentsignin">Copy after login</div></div><p>In an HTML-5 enabled browser supporting the scoped attribute, rendering this code results in the scope of the stylesheet being limited to the <div> element.<p><strong>Caveat: Lack of Scoped Attribute Support</strong></p><p>It's important to note that as of May 2013 (the time of writing), no mainstream browser supported the scoped attribute. However, developer builds of Chromium supported it.</p><p><strong>Implication: Future-Proofing and Current Browser Behavior</strong></p><p>Despite the lack of support for the scoped attribute, current browsers generally permit <style> tags within the <body>.</p><p>Given the fact that:</p></pre> <ul> <li>Scoped attribute is ignored by most browsers</li> <li><style> tags within <body> are allowed by most browsers</li> <li>Future implementations must allow scoped <style> tags within <body></li> </ul> <p>It is essentially harmless to place <style> tags within the <body>, provided they are future-proofed with the scoped attribute. The only drawback is that current browsers will not scope the stylesheet.</p> <p><strong>Conclusion</strong></p> <p>Embedding CSS within HTML is a convenient way to achieve specific stylings for encapsulated, modular components. While the practice was once considered poor style, the scoped attribute in HTML 5 provides a legitimate solution. However, it is essential to be aware of browser support limitations and future-proof code accordingly.</p>
