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.
- 99.9% uptime
- PHP 8.3 with JIT compiler
- SSL, DDoS protection, and backups
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.
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.
Since <!DOCTYPE html> isn’t a typical HTML tag, there also isn’t a closing HTML tag with opening parenthesis 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">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.