Code has been added to clipboard!

What Does a !DOCTYPE HTML Do? Explanation and Examples

Reading time 3 min
Published Mar 27, 2019
Updated Jan 23, 2020

TL;DR – The <!DOCTYPE html> declaration must be placed in the beginning of every HTML document: it informs the browser about the document type.

The Meaning of <!DOCTYPE html>

The very first line in every web document should contain a <!DOCTYPE html> declaration. Even though it's wrapped in angle brackets, it is not a tag but a statement.

Doctype stands for Document Type Declaration. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly.

While the HTML syntax for this statement is somewhat simple, you must note each version of HTML has its own rules.

The HTML5 doctype Declaration

HTML5 <!DOCTYPE html> declaration is the simplest and shortest compared to those used by previous versions:

Example
<!DOCTYPE html>

doctype in Older Versions of HTML

Versions prior to HTML5 were based on Standard Generalized Markup Language (SGML), so their !doctype declaration had to contain a reference to their corresponding document type declaration (DTD). This also meant saving the DTD declaration and having separate ones for strict and transitional modes.

Note: HTML5 is based on its own standard and not SGML - that's why the HTML5 doctype does not require a DTD.

Creating a website today, you will surely use the simple doctype of HTML5. However, you might encounter other, more complicated versions in older documents. You will find a few examples of those below.

HTML 4.01

In HTML4, the doctype declaration was relatively longer and more descriptive than in HTML5. It contained all HTML elements and attributes, but did not allow using framesets. In the example below, you can see the doctype declaration for the transitional version of HTML 4.01:

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

This next example presents the doctype in the strict mode of HTML 4.01. The main difference between strict and transitional modes is that this one does not contain presentational and deprecated elements:

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

XHTML 1.0 Strict

This HTML doctype declaration also contains all elements and attributes, but no presentational and deprecated elements. However, it must be written in strict XML:

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

XHTML 1.1

This <!DOCTYPE html> is very similar to XHTML 1.0 Strict, but lets you add modules (e.g., provide ruby text support for Asian languages):

Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML <!DOCTYPE html>: Useful Tips

  • If you skip the HTML5 doctype declaration, the system will add it automatically when you run the website. This did not work with older versions of HTML.
  • The DTD for every HTML version can be found in its official specification (e.g., here you can see the DTD for HTML 4.01).
Basics
Introduction
Syntax
Editors
Basic Examples
Head Section
<!DOCTYPE>
Tags and Elements
Semantic Elements
Tags Reference
Attributes
Comments
Block and Inline Elements
Forms
Form Elements
Input
Responsive Web Design
Inline Scripts
Uniform Resource Locator
Redirect
XHTML
Geolocation
Drag and Drop
Local Storage
Web Workers
Server-Sent Events
Character Encoding
Text Formatting
Quotation and Citation Elements
Headings
Paragraphs
Links
Tables
Lists
Symbols
Space
Tab
Styles
Computer Code
Layout
Classes
Colors
Images
iframes
Audio Player
Video Player
YouTube Videos
Multimedia
Canvas
SVG
<!-- -->
<a>
<abbr>
<acronym> DEPRECATED
<address>
<applet> DEPRECATED
<article>
<aside>
<audio>
<b>
<base>
<basefont> DEPRECATED
<bdi>
<bdo>
<big> DEPRECATED
<blink> DEPRECATED
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center> DEPRECATED
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir> DEPRECATED
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font> DEPRECATED
<footer>
<form>
<frame> DEPRECATED
<frameset> DEPRECATED
<h1> – <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen> DEPRECATED
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem> DEPRECATED
<meta>
<meter>
<nav>
<noframes> DEPRECATED
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike> DEPRECATED
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt> DEPRECATED
<u>
<ul>
<var>
<video>
<wbr>