HTML Doctypes

The DOCTYPE declaration tells the browser which version of HTML the page is written in. It must be the very first thing in your HTML document.

5️⃣

HTML5 DOCTYPE

Simple and easy to remember:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My HTML5 Page</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Result: Modern HTML5 page with proper standards mode

4️⃣

HTML 4.01 DOCTYPE

Longer and more complex:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>HTML 4.01 Page</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

❌

XHTML DOCTYPE

XML-based HTML with strict rules:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>XHTML Page</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

⚠️

Why DOCTYPE Matters

Without DOCTYPE, browsers use "quirks mode":

<!-- Missing DOCTYPE - BAD! -->
<html>
<head>
  <title>Page without DOCTYPE</title>
</head>
<body>
  <p>This may not display correctly</p>
</body>
</html>

Problem: Browser uses quirks mode, causing layout issues

Quick Quiz

Question: What is the HTML5 DOCTYPE declaration?