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 de­clar­a­tion is missing in the document, it can lead to errors in how your website is displayed.

Web hosting
The hosting your website deserves at an un­beat­able price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced pro­tec­tion
  • Only at IONOS: up to 500 GB 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 de­clar­a­tion 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 de­clar­a­tion 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 pro­gram­mers and browsers with in­form­a­tion at first glance of the Document Type Defin­i­tion (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 de­clar­a­tion, websites may be displayed in­cor­rectly. That’s because browsers auto­mat­ic­ally switch to ‘Quirks mode’ if <!DOCTYPE html> is missing. This is to preserve the backward com­pat­ib­il­ity and present­a­tion of websites that are behind in current code standards. At the same time, this can lead to things being in­cor­rectly 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 sens­it­iv­ity 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 sens­it­iv­ity and is placed im­me­di­ately before the first HTML tag on the first line of the HTML document. The in­form­a­tion 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 com­plic­ated. That’s why even ex­per­i­enced pro­gram­mers often copy-paste it into the HTML document. The com­plex­ity is due to HTML4 and older code languages being based on the HTML pre­de­cessor SGML (Stand­ard­ized Gen­er­al­ized Markup Language) and browsers needing the exact defin­i­tion 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 Trans­ition­al:

<!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 de­clar­a­tion 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 Trans­ition­al:

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

Contrary to HTML5 and its pre­de­cessors, no DOCTYPE de­clar­a­tion is re­com­men­ded 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 de­clar­a­tion isn’t a re­quire­ment and can be omitted in HTML documents. Re­gard­less of this, the spe­cific­a­tion of the document type is con­sidered the un­of­fi­cial standard. If the de­clar­a­tion 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 func­tion­al­ity of a website can be impaired.

Good to know: DOCTYPE shouldn’t only appear at the beginning of the source code. Each in­di­vidu­al sub-page in an HTML document should include the de­clar­a­tion.

Go to Main Menu