Do You Need the DOCTYPE Declaration?

New to HTML? Wondering if and why you need the DOCTYPE declaration? We explain!

Published Categorized as HTML

The DOCTYPE declaration is the <!DOCTYPE html> tag at the opening of an HTML document. It tells the browser that this is an HTML document and the HTML version, so that the browser can use that information to display the document correctly.

In its simplest form, the DOCTYPE declaration looks like this:

<!DOCTYPE html>
<html>
<head>
    <!-- Head tags go here -->
</head>
<body>
    <!-- Body tags go here -->
</body>
</html>

This tells the browser that the document is formatted in HTML5.

In previous versions of the HTML markup language, the DOCTYPE declaration contained more attributes. However, as MDN Web Docs points out, these days, there are no valid reasons to use a more complicated document type declaration.

Is the DOCTYPE declaration required?

The DOCTYPE declaration is required. To render the page, the browser needs the document type declaration to know that this is an HTML document as well as what version of HTML to use for that rendering. Per the HTML specification, certain other tags like <html> can safely be omitted from an HTML document, but not the DOCTYPE declaration.

What happens if there is no DOCTYPE declaration?

A document without a DOCTYPE declaration forces the browser to enter a state of backward compatibility and render the page in quirks mode, treating it as if it was designed for older browsers. Unless the HTML markup on the page was written for older browsers, this can cause it to break.

Is the DOCTYPE declaration case-sensitive?

Even though most web developers declare the document type using <!DOCTYPE html>, the DOCTYPE declaration is case-insensitive. The HTML5 specification requires browsers to look for a case-insensitive match of the string “<!DOCTYPE” followed by a whitespace, and then a case-insensitive match of the string “html” followed by the greater-than sign.

You can make your DOCTYPE declaration uppercase (<!DOCTYPE HTML>), lowercase (<!doctype html>), or a mix (<!DOCTYPE html>) — it won’t make any difference in a modern web browser.

By Dim Nikov

Editor of Maker's Aid. Part programmer, part marketer. Making things on the web and helping others do the same since the 2000s. Yes, I had Friendster and Myspace.

Leave a comment

Your email address will not be published. Required fields are marked *