How to use the DOCTYPE html tag

The <!DOCTYPE html> tag should always be placed at the beginning of the source code of HTML documents and sub-pages. Thanks to DOCTYPE, you can tell at first glance what type of document you’re dealing with. If the declaration is missing in the document, it can lead to errors in how your website is displayed.

Web Hosting
Secure, reliable hosting for your website
  • 99.9% uptime and super-fast loading
  • Advanced security features
  • Domain and email included

What is DOCTYPE html?

If you work with HTML documents, then you probably know <!DOCTYPE html>. Although it’s not one of the classic HTML tags, DOCTYPE html should be in first place in HTML documents. Even before the actual source code, DOCTYPE indicates which document type a browser should open and which code syntax and grammar is used. Although the declaration is one of the most important elements in the HTML document, it’s often forgotten. Since its presence is now assumed, you shouldn’t forget to mark the document type for each page with . Good HTML editors come with an error-checking feature that points out missing DOCTYPE lines.

Tip

While the DOCTYPE declaration clarifies the document type, HTML div serves as an empty container without semantic meaning that you can freely fill with scripts and CSS for website design.

What is DOCTYPE html used for?

The goal of DOCTYPE html is to provide programmers and browsers with information at first glance of the Document Type Definition (DTD) and how a website should be rendered. The DTD indicates which code language is used on the page or in the HTML document. This applies, for example, to files in HTML, XHTML, SVG, MathML, or XML. So, if you learn HTML and want to create a website, you should insert as the first step.

If you don’t include the DOCTYPE declaration, websites may be displayed incorrectly. That’s because browsers automatically switch to ‘Quirks mode’ if <!DOCTYPE html> is missing. This is to preserve the backward compatibility and presentation of websites that are behind in current code standards. At the same time, this can lead to things being incorrectly displayed despite current code, when browsers obey outdated, invalid code elements.

Note

Since <!DOCTYPE html> isn’t a typical HTML tag, there also isn’t a closing HTML tag with opening brackets and slash (</). And, no case sensitivity applies, so upper and lower case are not crucial

What kind of DOCTYPE html exist?

Since DOCTYPE html in HTML5 isn’t based on SGML, the form is very easy to remember. It requires no case sensitivity and is placed immediately before the first HTML tag on the first line of the HTML document. The information a browser needs about the document type and display look like this:

<!DOCTYPE html>

Code examples for older HTML versions

In documents that still use older HTML versions like HTML4 or XHTML, DOCTYPE looks much more complicated. That’s why even experienced programmers often copy-paste it into the HTML document. The complexity is due to HTML4 and older code languages being based on the HTML predecessor SGML (Standardized Generalized Markup Language) and browsers needing the exact definition of the document type.

In markup languages before HTML5, these DOCTYPE codes are used at the beginning of an HTML document:

XHTML 1.0 Strict:

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

XHTML 1.0 Transitional:

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

XHTML 1.1 Strict:

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

For e-books in the EPUB2 standard as well as older e-book formats, the DOCTYPE declaration is also still added in XHTML 1.1 Strict at the beginning of the XHTML document:

HTML 4.01 Strict:

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

HTML 4.01 Transitional:

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

Contrary to HTML5 and its predecessors, no DOCTYPE declaration is recommended for the SVG format – as well as before and after SVG 1.2 – since no DTD is used after SVG 1.2.

Why is DOCTYPE html so important?

The DOCTYPE html declaration isn’t a requirement and can be omitted in HTML documents. Regardless of this, the specification of the document type is considered the unofficial standard. If the declaration is missing, it’ll be marked as an error, for example, when the HTML document is checked. If the browser cannot identify the syntax and grammar rules used with certainty, display errors can come up and the functionality of a website can be impaired.

Good to know: DOCTYPE shouldn’t only appear at the beginning of the source code. Each individual sub-page in an HTML document should include the declaration.

Was this article helpful?