What is the Purpose of DOCTYPE?
Answer
DOCTYPE (Document Type Declaration) tells the browser which version of HTML the page is written in and instructs it to render the page in standards mode rather than quirks mode.
Syntax
<!DOCTYPE html>
This is the HTML5 doctype - it's simple and tells the browser to use the latest HTML standard.
Rendering Modes
Historical Context
Older HTML versions required longer DOCTYPE declarations:
<!-- HTML 4.01 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5 (simplified) -->
<!DOCTYPE html>
Key Points
| Aspect | Description |
|---|---|
| Position | Must be the very first line of the HTML document |
| Case sensitive | No - <!DOCTYPE html> = <!doctype html> |
| Closing tag | None required |
| Purpose | Triggers standards mode in browsers |
Common Mistakes
<!-- ❌ Wrong - DOCTYPE not first -->
<html>
<!DOCTYPE html>
<!-- ❌ Wrong - Extra content before DOCTYPE -->
<!DOCTYPE html>
<!-- ✅ Correct -->
<!DOCTYPE html>
<html></html>
</html>
Why It Matters
- Without DOCTYPE: Browser uses quirks mode, causing inconsistent CSS box model and styling
- With DOCTYPE: Ensures consistent rendering across all modern browsers