Doctype and its Purpose in HTML Document

By Srijan 27 April, 2018
Doctype HTML
Image from Pixabay

Doctype is required in HTML document for legacy reasons. Its main purpose is to prevent browser from entering 'Quirks Mode' while rendering the document. Doctype declaration ensures that browser will make its best effort to follow relevent specifications while rendering the document, rather than using a different rendering mode that is incompatible with some specifications.

What is Quirks Mode ?

In old days, pages were written seperately for supporting different browsers. It means that if you were developing a website in early days of internet, you would have written code seperately 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 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:

  1. Quirks modes: Layout emulates non-standard behaviour as supported by old browsers
  2. Almost standard modes: Small number of quirks/old behaviour are supported while rendering layout.
  3. Full standard modes: Layout emulates standard behaviour 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. Doctype should be included at the beginning of HTML document as shown in above example. In HTML5, Doctype's only purpose is to activate full standard mode.

Note: Anything before 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.

Follow us on
Sponsored