HTML <!DOCTYPE> Declaration
Learn the HTML <!DOCTYPE> declaration: use <!DOCTYPE html> to trigger Standards Mode, avoid Quirks Mode bugs, and start documents correctly.
The <!DOCTYPE> declaration is the very first line of an HTML document. It tells the browser which version of HTML the page is written in and — more importantly today — that the page should be rendered using web standards. It is not an HTML tag; it is an instruction to the browser.
This page covers the one doctype you should use, why it matters (Standards Mode vs. Quirks Mode), and a short note on the legacy doctypes you may still encounter in old code.
The Doctype You Should Use
For every new HTML document, use this single line, exactly:
<!DOCTYPE html>That is the complete HTML5 doctype. A few rules:
- It must be the first thing in the document, before the
<html>tag and before any other content (even before a comment or blank line, for safety). - It is not case sensitive —
<!DOCTYPE html>,<!doctype html>, and<!Doctype HTML>are all valid. The lowercase<!doctype html>is common, but the convention above is the most widely used. - There is no closing tag.
A minimal, complete document looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title of the document</title>
</head>
<body>
<h2>Elements example</h2>
<p>This is some paragraph.</p>
<p>This is another paragraph <br /> with a line break.</p>
</body>
</html>To learn what goes inside the document after the doctype, see HTML Basic Tags, the <html> tag, and the <head> tag.
Why the Doctype Matters: Standards Mode vs. Quirks Mode
When a browser parses a page, it picks one of two rendering modes:
- Standards Mode — the browser follows the modern W3C/WHATWG specifications. This is what you want. Layout, the box model, and CSS behave consistently across browsers.
- Quirks Mode — the browser emulates the buggy behavior of late-1990s browsers (think Internet Explorer 5) to keep very old pages from breaking. This mode is triggered when the doctype is missing, malformed, or an old/unknown one.
A correct <!DOCTYPE html> is what switches the browser into Standards Mode. Leave it out and you opt into Quirks Mode, where several things change in surprising ways:
- The box model breaks. In Quirks Mode,
widthandheightinclude padding and borders (the old IE box model), so a box you sized at200pxmay render wider or narrower than expected. line-height,vertical-align, and inline-element spacing behave differently, often producing extra gaps around images and table cells.- CSS units and percentages can be inherited and computed inconsistently.
These bugs are hard to diagnose because your CSS looks correct — the mode is wrong. Adding the doctype is the fix, which is why every modern document should start with it.
document.compatMode in the console: "CSS1Compat" means Standards Mode, "BackCompat" means Quirks Mode.A Note on Legacy Doctypes
Before HTML5, the doctype referenced a Document Type Definition (DTD) — a formal grammar describing which elements and attributes were legal. These declarations were long and easy to get wrong, for example HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">HTML 4.01 came in Strict, Transitional, and Frameset flavors, and XHTML 1.0 / 1.1 added several more (such as "-//W3C//DTD XHTML 1.0 Strict//EN"). You may still see these in older codebases.
The important takeaway: HTML5 replaced all of them with the single short <!DOCTYPE html>. It is the shortest valid doctype that reliably triggers Standards Mode, and it is the only one you need to write today.