HTML doctype Declaration
The <!DOCTYPE> declaration is a critical component of any HTML document. It’s not an HTML tag per se; instead, it’s an instruction to the web browser about the type of HTML document it’s about to process.
The <!DOCTYPE> declaration is the very first thing in an HTML document. It is not an HTML tag; instead, it is an instruction to the web browser about what version of HTML the page is written in.
In HTML 5, the declaration is very simple:
<!DOCTYPE html>
This is all you need to specify to ensure the browser renders the page in standards mode. This mode is used by the browser to decide how to render your site, and using the correct DOCTYPE ensures your site is displayed as intended.
Example
Here’s an example of a simple HTML document with a <!DOCTYPE> declaration:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
Welcome to my first HTML document!
</body>
</html>
powered by Advanced iFrame. Get the Pro version on CodeCanyon.
In the example above, <!DOCTYPE html> is the <!DOCTYPE> declaration. This specific declaration tells the browser that this is an HTML5 document.
History of DOCTYPE
The <!DOCTYPE> declaration has been a part of HTML since the standards were first established. Earlier versions of HTML required more complex DOCTYPEs that referenced a DTD (Document Type Definition), which provided a formal definition of the structure and the legal elements and attributes of an HTML document.
For example, here is the DOCTYPE for HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
These older declarations are not required for HTML5, and the simpler <!DOCTYPE html> declaration is preferred.
HTML Elements and Doctypes
You can refer to our comprehensive table of all HTML elements and what Doctype each element appears in.
Browser Support
The <!DOCTYPE> declaration is supported by all major browsers:
| Element | Chrome | Firefox | Safari | Opera | IE |
|---|---|---|---|---|---|
<!DOCTYPE> |
Yes | Yes | Yes | Yes | Yes |
Why is DOCTYPE Important?
While it might seem minor, the DOCTYPE declaration plays a critical role in the rendering of the webpage:
-
Standards Mode vs Quirks Mode: The DOCTYPE can trigger two different rendering modes in your browser: Standards Mode and Quirks Mode. In Standards Mode, the browser uses the W3C’s official HTML and CSS specifications. In Quirks Mode, the browser tries to accommodate outdated or incorrectly written code, which can lead to inconsistent results. Using
<!DOCTYPE html>ensures your page is rendered in Standards Mode. -
Consistency Across Browsers: Different browsers (like Chrome, Firefox, Safari, etc.) have different ways of interpreting HTML and CSS. The DOCTYPE declaration helps ensure your webpage is rendered consistently across different browsers.
-
Future-Proofing Your Code: Using the HTML5 DOCTYPE helps ensure your site stays compatible with future versions of HTML.
Overall, while it’s a small part of your HTML document, the <!DOCTYPE> declaration plays a critical role in ensuring your site works as expected. So, always start your HTML documents with <!DOCTYPE html> to use the latest standards mode.
Tips & Notes
Here’s a useful tip: the <!DOCTYPE> declaration is NOT case sensitive. Here are some examples of valid declarations:
<!DOCTYPE html>
<!DocType html>
<!Doctype html>
<!doctype html>
