← Back to All Tags

<!DOCTYPE>

Declares HTML document type

Definition and Usage

The <!DOCTYPE> declaration is not an HTML tag. It is an instruction to the web browser about what version of HTML the page is written in.

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not case sensitive.

Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect. This ensures your page is rendered correctly.
Important: Without a DOCTYPE declaration, browsers may render your page in "quirks mode," which can cause inconsistent display across different browsers.

Browser Support

The <!DOCTYPE> declaration is supported in all browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

HTML5 DOCTYPE

In HTML5, the DOCTYPE declaration is simple:

HTML5 DOCTYPE

<!DOCTYPE html>

This is the only DOCTYPE you need to remember for modern web development!

DOCTYPE Through HTML Versions

Here's how the DOCTYPE declaration has evolved:

HTML5 (Current Standard)

Example

<!DOCTYPE html>

Simple, easy to remember, and works with all modern browsers.

HTML 4.01 Strict

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Legacy DOCTYPE for HTML 4.01 Strict. No longer recommended.

HTML 4.01 Transitional

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Legacy DOCTYPE for HTML 4.01 Transitional. No longer recommended.

XHTML 1.0 Strict

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Legacy DOCTYPE for XHTML 1.0 Strict. No longer recommended.

Recommendation: Always use the HTML5 DOCTYPE (<!DOCTYPE html>) for all new projects. It's simpler and works with all modern browsers.

Examples

Complete HTML5 Document

A complete HTML5 document with proper DOCTYPE declaration:

Example

<!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>
</head>
<body>
    <h1>Welcome to HTML5</h1>
    <p>This is a properly structured HTML5 document.</p>
</body>
</html>

DOCTYPE Position

The DOCTYPE must be the very first line (before the <html> tag):

Correct

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <p>Content here</p>
</body>
</html>

Incorrect - DOCTYPE Not First

Incorrect Example

<!-- Comment before DOCTYPE -->
<!DOCTYPE html>
<html>
<body>
    <p>This will trigger quirks mode in some browsers!</p>
</body>
</html>

Case Insensitive

The DOCTYPE declaration is not case sensitive. All these are valid:

Example

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

However, lowercase is the standard convention: <!DOCTYPE html>

Why DOCTYPE is Important

  • Standards Mode vs Quirks Mode: DOCTYPE triggers "standards mode" rendering, ensuring consistent behavior across browsers
  • HTML Validation: Validators use DOCTYPE to determine which HTML specification to validate against
  • Browser Compatibility: Ensures your page is rendered correctly in all modern browsers
  • CSS Behavior: Some CSS properties behave differently in quirks mode vs standards mode
  • JavaScript APIs: Certain JavaScript APIs may not work properly without a DOCTYPE

What Happens Without DOCTYPE?

If you don't include a DOCTYPE declaration:

  • Browsers may render your page in "quirks mode"
  • CSS box model may behave inconsistently
  • Layout can differ significantly across browsers
  • Some HTML5 and CSS3 features may not work
  • JavaScript may encounter unexpected behavior
Warning: Never omit the DOCTYPE declaration. It takes only one line and prevents countless browser compatibility issues!

Try it Yourself

Interactive Example

This page uses the HTML5 DOCTYPE declaration. Open your browser's developer tools and view the page source to see the DOCTYPE at the very top of the document.

Browser Rendering Mode: Standards Mode ✓

This page is rendered in standards mode because of the HTML5 DOCTYPE.

Related Topics

  • <html>

    Defines the root of an HTML document

  • <head>

    Contains metadata/information

  • <!--...-->

    Defines a comment