HTML Doctypes
The DOCTYPE declaration tells the browser to use standards mode for rendering. HTML5 simplified it to one short line.
DOCTYPE through history
EXAMPLE
<!-- HTML5 (modern) - this is the only one you ever need now --> <!DOCTYPE html> <!-- Older HTML4.01 Strict (historic) --> <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <!-- Older HTML4.01 Transitional - allowed deprecated tags like <font> --> <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'> <!-- XHTML 1.0 Strict (historic) --> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <!-- What happens without a DOCTYPE --> <!-- Browsers fall into 'quirks mode' which emulates 1990s rendering bugs. Box model behaves differently, margins collapse oddly, table widths break. ALWAYS include <!DOCTYPE html> as the very first line. --> <!-- A complete minimal HTML5 page --> <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8' /> <meta name='viewport' content='width=device-width, initial-scale=1' /> <title>Standards mode</title> </head> <body> <h1>Hello, standards mode</h1> </body> </html> <!-- Check the rendering mode in DevTools console --> <script> console.log(document.compatMode); // 'CSS1Compat' = standards mode, 'BackCompat' = quirks </script>
Why it matters
In 2026 there is only one DOCTYPE: . It must be the very first line. Without it browsers slip into quirks mode and your CSS will misbehave in ways no one will believe until they see document.compatMode === BackCompat.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Doctypes</title>
</head>
<body>
<h1>HTML Doctypes</h1>
<p>This is a demo page for the "HTML Doctypes" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Write the modern HTML5 doctype declaration in full.
Starts with <! and ends with html>.
Discussion
Loading…