<!DOCTYPE>

Defines the HTML version used on the page
2 min read
Believemy logo

The <!DOCTYPE> declaration is an essential component of any HTML document. It informs the browser of the HTML version being used, ensuring a consistent and standardized rendering.

With the advent of HTML5, this declaration became simpler and universal, reducing the likelihood of errors! 😉

 

Structure of the <!DOCTYPE> Declaration

Contrary to popular belief, <!DOCTYPE> is not an HTML tag but a special instruction placed on the first line of an HTML document.

It tells the browser the HTML version used and enables the browser's rules to display elements on the page correctly.

Good to know

Failing to include this declaration often leads to... strange behaviors! Page elements might not be recognized as compliant with, for example, the HTML5 standard.

 

Syntax

With HTML5 (modern)

With the introduction of HTML5, the syntax for the <!DOCTYPE> declaration became much simpler than in the past! All you need to do is specify the instruction with the html attribute, as shown in this example:

HTML
<!DOCTYPE html>

 

With older versions of HTML

In earlier versions like HTML 4.01, the syntax referenced a DTD (Document Type Definition).

For example, this would be written for a page using HTML 4.01:

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

These declarations were complex and prone to errors, which is why they were simplified in HTML5. Phew! 😮‍💨

 

Attributes

The <!DOCTYPE> declaration has no attributes because it is not an HTML tag. Its role is purely declarative.

 

Compatibility

For HTML5 (modern)

All current browsers recognize and use the <!DOCTYPE html> declaration to interpret an HTML5 document.

 

For older HTML versions

Pages using an older HTML version must include a DTD declaration for HTML 4.01 and XHTML. All browsers recognize this instruction as well.

 

In general

The <!DOCTYPE> instruction is compatible with all browsers.

ElementGoogle ChromeSafariMozilla FirefoxEdge
<!DOCTYPE>YesYesYesYes

Related terms

Discover our hTML and CSS glossary

Browse the terms and definitions most commonly used in HTML and CSS development.

Share this article

Want to help us? Share this article on your networks or even better: on your site, in an article or in your newsletter.