In the rapidly changing world of web development, it’s essential to keep up with the latest standards. Some ways of inserting <style> tag to the HTML document are not valid for HTML5. In this article we will go through different compliant methods to insert <style> tags to your HTML documents. Although there are some invalid ways of inserting the <style> tag, we will explore some alternatives that adhere to the current HTML5 standards.
1. External Stylesheets (valid)
One of the most common and recommended ways to style web pages is by using external stylesheets. Instead of adding styles directly into the HTML, you create a separate CSS file and link it to your web page. This keeps your HTML clean and separates the style rules from the content, making it easier to manage and reuse styles across multiple pages.
To link an external stylesheet, use the following code within the <head> section of your HTML document:
1 | <link rel="stylesheet" href="styles.css"> |
2. Inline <style> tag in the <head> (valid)
Another valid method is to use inline styles in the <head> section. If you have styles that are specific to a single page and won’t be reused elsewhere, you can write your CSS directly in the <head>. This ensures that your styles are loaded before the page content, preventing any unwanted visual glitches.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <title>My Page</title> <style> /* Your CSS rules here */ </style> </head> <body> <!-- Your page content here --> </body> </html> |
3. Inline <style> tag in the <body> (in-valid), but acceptable.
A <style> tag within the <body> tag won’t validate because the HTML specs say it can’t be there. The reason behind this restriction is to maintain a clear separation of concerns between the content (HTML) and the presentation (CSS). Placing <style> tags within the <body> goes against the principles of well-structured and maintainable HTML documents.
Try running the code below in https://validator.w3.org/#validate_by_input, and you should able to see the error.
Can I still use the <style> tag inside of the <body> tag?
Using the <style> tag directly inside the <body> tag is not a valid approach according to the HTML5 specification. The official HTML5 specification strictly defines the placement of the <style> tag within the <head> element, specifically to separate content (HTML) from presentation (CSS).
However, placing <style> tags in the <body> will work in most modern browsers, but it is considered non-compliant. This approach however is still used by many websites out there. Especially with CMS platforms like WordPress, Drupal, Site-core, and Adobe Experience Managers, full-filling features and UX for simple scenarios, it is acceptable… The thing is, even thought we have HTML5 specification, even Google (source) themselves are taking shortcuts to cut down performance costs.
Note: While Google recommends we use W3C validation, Google doesn’t rank valid html and css pages above invalid pages. If Google can crawl and render a page Google will rank the page appropriately based on how relevant it is to the query. source.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <!-- Your page content here --> <style> * Your CSS rules here */ </style> </body> </html> |
Summary
Following W3C standards in web development brings positive outcomes such as improved cross-browser compatibility, accessibility, future-proofing, and maintainability. It also fosters interoperability, boosts SEO performance, enhances security, and contributes to a positive reputation. Embracing W3C standards ensures a faster development process and a healthier web ecosystem.
