HTML Document Type | The <!doctype html> Declaration

Understanding the <!doctype html> Declaration

The <!doctype html> declaration appears at the beginning of an HTML document and tells the browser to process the page using modern standards mode.

Although the declaration appears alongside HTML markup, it is not an HTML element and does not represent webpage content. Modern HTML uses the short and simple <!doctype html> declaration at the very beginning of the document.

HTML Doctype Syntax

The document type declaration for a modern HTML document is:

<!doctype html>

The declaration begins with <!, contains the keyword doctype followed by html, and ends with >.

Unlike an HTML element, the doctype does not have an end tag:

<!doctype html>
<!-- There is no closing doctype -->

For modern HTML documents, this short declaration is all that is needed.

Purpose of the Doctype

The primary purpose of <!doctype html> is to tell the browser to render the document using standards mode.

The doctype does not tell the browser which HTML elements appear on the page, provide visible content, or link the document to a separate HTML specification file.

Instead, it helps ensure that browsers use modern, standards-based rendering behavior when interpreting the webpage.

Where to Place the Doctype

The doctype belongs at the very beginning of an HTML document, before the opening html tag.

<!doctype html>
<html lang="en">
  ...
</html>

You should include the declaration once in each HTML document.

It is not placed inside the head, body, or any other HTML element.

Doctype & Standards Mode

Web browsers have different document rendering modes that exist largely for compatibility with older webpages. A proper modern doctype causes the browser to use standards mode.

If the doctype is missing or certain older doctypes are used, a browser may enter quirks mode, where some layout and rendering behavior imitates older browsers.

Quirks mode can cause CSS and page layout to behave differently from modern standards-based expectations. Including <!doctype html> helps avoid these compatibility behaviors.

For modern webpages, the goal is straightforward: include the HTML doctype and allow the browser to use standards mode.

The Doctype Is Not an HTML Element

The doctype is sometimes casually called a tag, but technically it is a declaration rather than an HTML element.

An HTML element such as p represents part of the document:

<p>This is a paragraph.</p>

The doctype does not represent content:

<!doctype html>

It provides information to the browser about how the document should be processed rather than creating an element in the webpage's document structure.

This distinction is useful because it explains why the doctype does not have content, attributes like a normal HTML element, or an end tag.

Older HTML Doctypes

Older versions of HTML used much longer document type declarations. These declarations could include information identifying a particular document type definition, commonly called a DTD.

For example, an HTML 4.01 document might have used a declaration similar to:

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

XHTML documents also used longer declarations based on XML and DTD requirements.

You may still encounter these older doctypes when maintaining legacy websites, but they should not be copied into new modern HTML documents.

Modern HTML greatly simplifies the declaration:

<!doctype html>

Uppercase & Lowercase

The doctype keyword is ASCII case-insensitive in HTML, so you may encounter the declaration written in different letter cases.

<!DOCTYPE html>
<!doctype html>

Both forms are recognized in HTML. These tutorials use lowercase:

<!doctype html>

Using lowercase keeps the declaration consistent with the lowercase HTML element and attribute style used throughout these tutorials.

Doctype in a Complete HTML Document

The doctype is the first part of the basic HTML document structure you began using earlier in this tutorial.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Webpage</title>
  </head>
  <body>
    <h1>My Webpage</h1>
    <p>Welcome to my webpage.</p>
  </body>
</html>

The declaration appears before the html element and establishes the browser's rendering mode before the document itself is processed.

The remaining pages in this section examine the major parts of this document structure in greater detail.

Common Doctype Mistakes

The modern HTML doctype is simple, but several mistakes can still occur when creating or updating HTML documents.

Leaving the doctype out of the document.
Placing the doctype inside the html, head, or body element.
Adding a closing doctype declaration.
Copying a long HTML 4 or XHTML doctype into a new HTML document.
Assuming the doctype is an HTML element that creates page content.
Assuming the modern doctype points the browser to an external DTD.

For a new HTML document, remembering one line avoids most of these problems:

<!doctype html>

Doctype Best Practices

Modern HTML requires very little decision-making when it comes to the document type declaration.

Begin modern HTML documents with <!doctype html>.
Place the declaration before the html element.
Include only one doctype declaration per document.
Do not add an end tag.
Do not use legacy HTML or XHTML doctypes for new HTML documents.
Use consistent letter casing throughout your project's markup.

Using the modern doctype consistently gives every HTML document a simple and predictable starting point.

Summary

The <!doctype html> declaration belongs at the beginning of a modern HTML document and causes browsers to render the page using standards mode. It is a declaration rather than an HTML element and does not contain content or use an end tag.

Older HTML and XHTML documents may contain longer doctypes, but new HTML documents should use the short modern declaration. Adding <!doctype html> as the first line gives your document the correct foundation before the browser processes the HTML structure that follows.

The HTML Document Type