📄 What is DOCTYPE?

The DOCTYPE declaration tells the browser which version of HTML the document is written in. It must be the very first thing in your HTML document, before the <html> tag.


<!-- HTML5 DOCTYPE (recommended) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

HTML5 DOCTYPE

✨

Simple

Easy to remember and type

<!DOCTYPE html>

🌐

Universal

Works in all modern browsers

<!-- No version needed -->

🔄

Backward Compatible

Works with older browsers too

<!-- Future-proof -->

⚡

Standards Mode

Triggers standards-compliant rendering

<!-- No quirks mode -->

🔹 Why DOCTYPE is Important

The DOCTYPE declaration affects how browsers render your page:

With DOCTYPE:

Standards Mode: Browser follows modern web standards
Consistent Rendering: Page looks the same across browsers
CSS Works Properly: Styles are applied correctly
JavaScript Functions: Modern JS features work as expected

Without DOCTYPE:

Quirks Mode: Browser uses legacy rendering
Unpredictable Layout: Pages may look different
CSS Issues: Styles may not work correctly
Compatibility Problems: Modern features may fail

🔹 HTML5 vs Older DOCTYPEs

Compare the simplicity of HTML5 with older versions:

<!-- HTML5 (RECOMMENDED) -->
<!DOCTYPE html>

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

Comparison:

Version	Length	Complexity
HTML5	15 characters	Very Simple
HTML 4.01	100+ characters	Complex
XHTML 1.0	120+ characters	Very Complex

🔹 Common DOCTYPE Mistakes

Avoid these common errors when using DOCTYPE:

<!-- ❌ WRONG: Missing DOCTYPE -->
<html>
<head>
    <title>Page without DOCTYPE</title>
</head>

<!-- ❌ WRONG: DOCTYPE not first -->
<html>
<!DOCTYPE html>
<head>

<!-- ❌ WRONG: Text before DOCTYPE -->
<!-- This is my website -->
<!DOCTYPE html>

<!-- ❌ WRONG: Incorrect syntax -->
<!doctype html>  <!-- lowercase -->
<!DOCTYPE HTML>  <!-- uppercase HTML -->

<!-- ✅ CORRECT: Proper DOCTYPE -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Correct Page</title>
</head>

🔹 DOCTYPE and HTML Validation

DOCTYPE helps validators check your HTML:

HTML Validation Benefits:

Error Detection: Find HTML mistakes early
Cross-browser Compatibility: Ensure consistent rendering
Accessibility: Better support for screen readers
SEO Benefits: Search engines prefer valid HTML
Future-proofing: Code works with new browser versions

Popular HTML Validators:

W3C Markup Validator: validator.w3.org
HTML5 Validator: html5.validator.nu
Browser Dev Tools: Built-in validation

🔹 Complete HTML5 Document

A properly structured HTML5 document with DOCTYPE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML5 Page</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    
    <main>
        <p>This page uses the HTML5 DOCTYPE declaration.</p>
        <p>It will render consistently across all modern browsers.</p>
    </main>
    
    <footer>
        <p>© 2024 My Website</p>
    </footer>
</body>
</html>

HTML Doctypes