At the top of all HTML documents, you will see the document type declaration written using the <!DOCTYPE > tag.
Here’s one example of an HTML5 document type declaration:
<!DOCTYPE html>
<html>
<head>
<!-- head content... -->
</head>
<body>
<!-- body content... -->
</body>
</html>
Technically, the <!DOCTYPE > tag is used to inform web browsers about the HTML version of the document.
This is required so that different web browsers can render the content correctly, especially during the beginning of the Internet.
Modern web browsers could parse HTML in two modes:
- Quirks mode
- Standard mode
The quirks mode is a set of techniques used by modern web browsers to parse legacy HTML documents designed for old web browsers that do not implement the W3C (World Wide Web Consortium) standards.
The W3C is an organization that develops the standards for how the Web works, but web browsers and HTML documents have been used by early web developers to exchange information on the Web before the standards were released (this was in the very early days of the Internet)
As a result, there are lots of legacy documents that work for legacy browsers, but they won’t work for browsers that implement the W3C standards for HTML and CSS.
This is why modern web browsers have quirks mode. It allows the browsers to render legacy non-standard documents correctly.
Originally, the doctype for HTML 4.01 looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
When the development of HTML5 started, the W3C took note of how browsers only use special-purpose HTML parsers instead of general-purpose document parsers. Browsers don’t access the doctype URL even when it’s provided.
This means that for browsers, the presence of the doctype is only used to trigger the standard mode instead of the quirks mode.
This is why in HTML5 the doctype declaration has been reduced to a very short syntax. You only need the <!DOCTYPE html> declaration without the rest.
The DOCTYPE syntax itself is case-insensitive, so you can use lower or mixed cases:
<!doctype html>
<!DoCtyPe html>
Without the doctype declaration, your browser may go quirks mode and parts of your HTML document may not work correctly.
For example, HTML5 elements like <canvas> and <video> may not be supported in quirks mode.
To know if your browser is running in quirks mode, you can open the browser’s JavaScript console and type the following code:
console.log(document.compatMode);
If document.compatMode equals "BackCompat" that means you’re running in quirks mode.
Here’s a screenshot from Google Chrome for index.html document that doesn’t has the doctype declaration:
With the doctype declaration, the document.compatMode should show "CSS1Compat".
Now you’ve learned the importance of doctype declarations for HTML documents. Nice work 😉