HTML Doctype: What It Is and Why It Matters

Learn about the HTML doctype declaration, what it does, and why you need it at the start of every HTML page.

Introduction

Every HTML document should start with a doctype declaration. Let's learn what it is and why it's important!

What You Will Learn

What is the doctype declaration
Why we need it
The HTML5 doctype
Doctypes from previous HTML versions

What is Doctype?

**DOCTYPE stands for Document Type Declaration.

It tells the browser:

What type of document this is
Which HTML version we're using
How to render the page correctly

HTML5 Doctype

This is all you need for modern HTML:

<!DOCTYPE html>

That's it! Short and simple! 😊

Where to Put It

Always put the doctype first in your HTML file, before anything else:

<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>

What Happens Without Doctype?

If you forget the doctype, the browser enters Quirks Mode:

Quirks Mode

Emulates old browser bugs for backward compatibility
Uses non-standard behavior
CSS might not work as expected
Layout can cause inconsistent across browsers

Standards Mode (With doctype, browser uses Standards Mode:

Follows web standards
Consistent behavior across browsers
Modern CSS and HTML work correctly

How to Check Which Mode You're In

Open DevTools (F12) → Console → Type:

document.compatMode

"CSS1Compat" → Standards Mode ✅
"BackCompat" → Quirks Mode ❌

Old Doctypes (HTML4 and XHTML)

You might see these in older code:

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">

**Don't use these anymore - use the simple HTML5 doctype instead!

Why HTML5 Doctype is Best

✅ **Simple: Just <!DOCTYPE html> ✅ Easy to remember : No long URLs or complex syntax ✅ Works in all browsers : Even old browsers! ✅ Future-proof: Will work forever ✅ Triggers Standards Mode in all browsers

Common Mistakes

❌ Putting something before doctype:

<!-- Don't do this! -->
<html>
<!DOCTYPE html>
<head>...</head>

❌ Wrong case:

<!-- Don't do this! -->
<!doctype html>

{/* Or this! */} <!DOCTYPE HTML>

(Actually browsers are case-insensitive, but `<!DOCTYPE html>` is standard)

❌ Adding extra stuff:
```html
\{/* Don't do this! */\}
&lt;!DOCTYPE html SYSTEM "about:legacy-compat"&gt;

Best Practices

✅ Always include <!DOCTYPE html> at the **first line ✅ Use the simple HTML5 doctype ✅ No spaces or comments before it ✅ No XML prologs before it

Example: Correct Document

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;My Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;

FAQs

**Q: Doctype case-sensitive? A: No, but <!DOCTYPE html> is the standard convention.

**Q: What happens I omit the doctype? A: Browser enters Quirks Mode and may render incorrectly.

**Q: Do need in XML/XHTML doctypes? A: No, use the HTML5 doctype for everything.

**Q: Does doctype affect SEO? A: No directly, but correct rendering helps users, indirectly helps.

Summary

Always start every HTML document <!DOCTYPE html> on the first line! simple, short, works, modern, standards-compliant rendering all!

Next Topic

Now let's learn about HTML Tag the root element of every page!

← Back to Syllabus