🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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).