HTML Doctypes Reference

Badar KhalilUpdated September 27, 2026 2 min read

HTML Doctypes Reference

The HTML doctype is the very first line of any HTML document, and it tells the browser which version of HTML the page is written in. This HTML doctypes reference explains the modern HTML5 doctype, older legacy doctypes, and why choosing the right doctype prevents rendering bugs across browsers.

What Is a DOCTYPE?

A doctype (short for 'document type declaration') is not an HTML tag — it's an instruction to the browser that determines whether the page renders in standards mode or quirks mode. Without a correct doctype, browsers may render CSS and layout inconsistently.

1. The Modern HTML5 Doctype

Doctype	Description
<!DOCTYPE html>	Simple, case-insensitive doctype used for all modern HTML5 documents

This single line replaced the long, complex doctypes required in earlier HTML/XHTML versions. It triggers standards mode in every modern browser.

2. Legacy Doctypes (HTML 4.01 / XHTML)

Doctype	Description
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	HTML 4.01 Strict — no deprecated presentational elements allowed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	HTML 4.01 Transitional — allows some deprecated tags
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	XHTML 1.0 Strict — requires well-formed XML syntax

3. Quirks Mode vs Standards Mode

Mode	Behavior
Standards Mode	Browser renders the page according to modern web standards (triggered by <!DOCTYPE html>)
Quirks Mode	Browser mimics old, inconsistent rendering behavior from the 1990s, often triggered by a missing or malformed doctype
Almost Standards Mode	A middle ground used by some browsers with minor quirks in table cell sizing

4. Why the Doctype Matters

Skipping the HTML doctype or using an outdated one can cause CSS box model calculations, table layouts, and font rendering to break unpredictably between browsers. Always place <!DOCTYPE html> as the very first line of every HTML document, before the <html> tag.

5. Common Doctype Mistakes

Mistake	Consequence
Missing doctype entirely	Triggers quirks mode, causing inconsistent rendering
Doctype placed after other tags	Ignored by the browser, quirks mode is triggered
Using an old XHTML/HTML4 doctype unnecessarily	Adds unneeded strictness without HTML5 feature support

Try It Yourself

Use the example below to see the correct placement of a doctype declaration in a full HTML document.

Try it Yourself HTML

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>My Page</title>
</head>
<body>
  <h1>Standards Mode Page</h1>
  <p>This page uses the modern HTML5 doctype.</p>
</body>
</html>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

console.log(document.compatMode);
// 'CSS1Compat' = standards mode
// 'BackCompat' = quirks mode

Output

Press Run to execute.

Exercise: Fix the Missing DoctypeHTML

The HTML document below is missing its doctype declaration. Add the correct HTML5 doctype as the very first line.

Try it Yourself HTML

<html lang='en'>
<head>
  <title>Test Page</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

Output

Press Run to execute.

Show expected output

The document starts with <!DOCTYPE html> followed by the existing markup.

This is a self-check — compare your result with the expected output above.

Was this page helpful?