HTML Doctypes

The <!DOCTYPE> declaration is not an HTML tag - it is an instruction to the browser, telling it which set of rules to use when rendering the page. It must always be the very first line of an HTML document, before the <html> tag.

1) Standards Mode vs Quirks Mode


<!-- Without a doctype, old browsers render in "quirks mode" -->
<!-- which mimics old, inconsistent, buggy rendering behavior -->

<!-- With a correct doctype, browsers use "standards mode" -->
<!-- which follows the modern HTML/CSS specifications consistently -->

A missing or malformed doctype can cause your CSS box sizing, margins, and layout to behave unpredictably across browsers.

2) The Modern HTML5 Doctype


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>

</body>
</html>

That's it. HTML5 simplified the doctype to a single short line: <!DOCTYPE html>. Every page on this tutorial uses this doctype.

3) Case-Insensitive, But Always First


<!-- All of these are treated exactly the same by browsers -->
<!DOCTYPE html>
<!doctype html>
<!DocType html>

The doctype keyword is case-insensitive, though lowercase <!doctype html> is the commonly recommended style. Regardless of casing, it must appear before any other markup, including comments or whitespace-sensitive content.

4) A Look Back: Older Doctypes


<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Before HTML5, a doctype had to point to a formal Document Type Definition (DTD) file, which made these declarations long and easy to mistype. "Strict" versions disallowed older presentational tags/attributes, while "Transitional" versions allowed them for backward compatibility. You will rarely need to write these today, but you may still see them in older codebases.

Best Practices:

  • Always start every HTML document with <!DOCTYPE html> as the very first line.
  • Never put anything - not even a comment - before the doctype.
  • Prefer lowercase <!doctype html> for consistency, though case does not matter to browsers.
  • You do not need to memorize the old HTML 4.01/XHTML doctypes; they are shown here only for historical context.
  • A missing doctype triggers quirks mode, which can silently break your CSS layout.