While creating HTML pages you are using <!DOCTYPE html> and you always think what is DOCTYPE html and what is its purpose? Don’t worry, I will explain this.
History of DOCTYPE html
In the old days of the web, pages were written in two versions: One for Netscape Navigator, and one for Microsoft IE. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web.
Browsers, therefore, introduced two modes to treat new standards-compliant sites differently from old legacy sites. Modes were: Quirks Mode and Standards Mode. For HTML documents, browsers use a DOCTYPE at the beginning of the document to decide which mode to handle.
Doctype
In HTML, the doctype is “required” to ensure that the browser makes a best-effort attempt at following the relevant specifications. Doctype is “not” an HTML element, rather a special instruction to the browser. If specified, it has to be at “the beginning” of the HTML document just after the Byte-Order-Mark (BOM) if any.
The DOCTYPE for HTML5 is case-insensitive and can be written as < !DOCTYPE html >
Formats of Doctypes
There are 3 types
- Normal (HTML5) <!DOCTYPE html>
- Deprecated (HTML 4/4.01, XHTML 1.0/1.1) <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>
- Legacy Tool Compatible <!DOCTYPE html system “about:legacy-compat”>
If Doctype is not specified?
The browser will switch to “Quirks Mode” when rendering a document. Quirks Mode “may be” incompatible with some standard specifications. The document may “render differently” in different browsers.
Read More: What are CSS Selectors and 13 Types of CSS Selectors with examples – Comprehensive Guide
Summary
“<!DOCTYPE html>” is the required preamble found at the top of all HTML documents. Its sole purpose is to prevent a browser from switching into “Quirks Mode” when rendering a document.
