July 27, 2024 
This is one of those weird queries I always found answers to but never understood.
Everywhere you go on the Internet, it says, “omitting DOCTYPE declaration will make the browser switch to quirks mode.” Sure, bruv, whatever you say. But what exactly is this quirks mode everyone talks about, but no one explains?
So you begin to wonder if this “quirks mode” is as big of a deal for everyone to be so scared. As such, I removed the DOCTYPE on a test version of codeop.tech. Turns out, it’s more important than it seems.
You should always put <!DOCTYPE html> at the beginning of every site page to ensure the web browser loading your website uses the latest web practices from HTML 5 and higher. Omitting the DOCTYPE declaration will break many “newer” site tags, such as <header> and <footer>, and render your site improperly to the end user.
Let’s step back a little bit. And I’ll explain everything in detail.
What exactly is <!DOCTYPE html>?
The <!DOCTYPE html> declaration is an instruction to the web browser about the HTML version used on the page. It’s not an HTML tag but a way to ensure the web browser renders your site using correct standards and rules (grammar).
Basically, it tells the browser, “Hey, this page is using HTML5, so please use the modern rendering engine.”
Now, why do you have to do this? Why can’t the browsers just render every page in HTML 5? I have two words for you: backwards compatibility.
Back in the day, web development was a bit of a wild west. Different browsers had their own interpretations of HTML, leading to inconsistent user experiences. To combat this, the World Wide Web Consortium (W3C) introduced the <!DOCTYPE> declaration to help standardise how browsers render web pages.
- HTML 1.0 to HTML 4.01: Each version had its own specific <!DOCTYPE> declaration. For example, HTML 4.01 had three types (strict, transitional, and frameset), which complicated things.
- HTML5: Thankfully, HTML5 simplified this with a single, easy-to-remember <!DOCTYPE html> declaration. This unified approach helps ensure that modern web practices are applied universally.
Today, the <!DOCTYPE html> declaration is crucial because it triggers what’s known as “standards mode” in browsers. This mode ensures that your HTML and CSS are interpreted according to the latest web standards.
Without it, browsers may revert to “quirks mode,” which emulates older, less consistent behaviour to maintain backward compatibility with legacy (older) websites.
So, when you omit the <!DOCTYPE html> declaration, you’re telling the browser to guess how to render your page, which often leads to unpredictable results. Trust me, it’s like playing Russian roulette with your website’s functionality and user experience.
Quirks Mode vs. Standards Mode
Quirks mode is a compatibility mode browsers use to emulate the behaviour of older Internet Explorer (IE) versions. On the other hand, Standards mode ensures that the browser renders the page according to the latest web standards.
When quirks mode is triggered, browsers often ignore modern CSS properties and JavaScript features. This can lead to inconsistencies and unexpected results, especially if your site relies on newer web technologies.
Rendering Issues
- Layout and Styling Problems: It can affect modern CSS properties, causing elements to be misaligned, improperly sized, or even completely invisible. From your POV, it’ll mess with your flex board or grid layout, leaving you with a jumbled mess instead of a sleek, responsive design.
- JavaScript Compatibility: Omitting the doctype can also affect JavaScript. Modern JavaScript features may malfunction, leading to errors or incomplete functionality.
SEO and Accessibility
- Impact on SEO: Search engines like Google prioritise websites that adhere to modern standards. Your site may not be indexed correctly when it is in quirks mode.
- Accessibility Concerns: Modern web standards ensure your site is accessible to all users, including those using assistive technologies. Quirks mode can interfere with these technologies, making your site less accessible.
MIN READ