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>
<!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.
DOCTYPE syntax itself is case-insensitive, so you can use lower or mixed cases:
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
<video> may not be supported in quirks mode.
"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
Now you’ve learned the importance of doctype declarations for HTML documents. Nice work 😉