Skip to main content

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

AspectDescription
PositionMust be the very first line of the HTML document
Case sensitiveNo - <!DOCTYPE html> = <!doctype html>
Closing tagNone required
PurposeTriggers 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