Doctype and its purpose in HTML Document
Doctype is required in HTML document for legacy reasons. Its main purpose is to prevent the browser from entering ‘Quirks Mode’ while rendering the document. Doctype declaration ensures that the browser will make its best effort to follow relevant specifications while rendering the document, rather than using a different rendering mode that is incompatible with some specifications.
What is Quirks Mode?
In the old days, pages were written separately for supporting different browsers. It means that if you were developing a website in the early days of the internet, you would have written code separately for chrome and firefox. To solve this problem, standards were developed by W3C but browsers could not have started supporting the new standards at once as it would have broken most of the websites at that time. Therefore, different rendering modes were developed for supporting new standard compliant sites as well as old legacy sites.
Layout Engine now uses three different rendering modes in web browsers:
- Quirks modes: Layout emulates non-standard behavior as supported by old browsers
- Almost standard modes: Small number of quirks/old behavior are supported while rendering the layout.
- Full standard modes: Layout emulates standard behavior as described by HTML and CSS specification.
Including <!Doctype html> in your Document
Including the DOCTYPE in a document ensures that the browser makes best-effort to follow standard specifications. The doctype should be included at the beginning of HTML document as shown in the above example. In HTML5, Doctype’s only purpose is to activate the full standard mode.
Note: Anything before the Doctype declaration can trigger quirks mode in IE 9 and older browsers.
Previous versions of HTML standard gave additional meaning to DOCTYPE, but it was never used by browsers for any other purpose than switching between different modes. We will have this topic for another article.
Summary
When you are writing HTML Document next time, don’t forget to add <!DOCTYPE html> at starting of the document. If you do, be prepared to debug any unusual behavior or so-called quirks in your document.
If you like this article, clap a few times. More interesting articles on its way, follow Hackinbits and we will update you when new articles will arrive.
