What is the <!doctype> HTML tag?

I have written a fair amount of HTML code in my day. Often times, this was quick and ugly, which served the purpose of a simple test or last minute school assignment. I usually did not follow best practices or defined standards. One standard that I have recently been encountering when viewing sample HTML code from experts on the web, yet have never fully understood, was the <!doctype> tag.

I figured since all true HTML documents are wrapped in <html></html> tags, specifying an additional document type tag was unnecessary. In this post, I will dive deeper into the purpose of the <!doctype> tag, and why its inclusion in an HTML document is vital to its proper rendering in a user’s web browser.

What is the <!doctype> tag?

The first line of every HTML file should be the <!doctype> tag. This tag provides information to web browsers about the type of document it is processing, and instructs the browser to render content differently depending on the type.

Example

Below is an example of a valid HTML 5 document using the <!doctype> tag:


<!doctype html>

<html>

<head>
<title>Hello, world!</title>
</head>

<body>
<p>This is a paragraph.</p>
</body>

</html>

As you can see in this basic example, the very first tag is the <!doctype> tag. Immediately following is the enclosing <html></html> tags with the rest of the content for the page.

Implementation

HTML 5

The current and most recent version of HTML, which is HTML 5, requires a very basic statement:

<!doctype html>

The html attribute specifies that the document should be rendered following HTML5 specification. In HTML5, no additional attributes or parameters are required. Nice and easy!

HTML 4.01 Strict

Older versions of HTML, such as HTML 4.01, require the <!doctype> tag to refer to the specific DTD the document adheres to. The DTDs are hosted by w3.org.

There are multiple versions of the HTML 4.01 DTD. The strict version only includes valid HTML 4.01 tags and nothing that from previous versions that has been deprecated.

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

HTML 4.01 Transitional

The transitional DTD includes all valid HTML 4.01 tags plus all deprecated tags. Use this if you are using really old, deprecated HTML (which I guess may exist somewhere).

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

Why is the <!doctype> Tag Important?

Modern web browsers support multiple modes for parsing and rendering content. When the browser observes the <!doctype html> statement (or the appropriate equivalent for HTML 4 and older), it renders the page in Standard mode. In this mode, the browser will render the page following the specified HTML and CSS specification.

If this tag is not present, or is malformed, it will instead render the page in Quirks mode. This mode is available in web browsers in order to support old content published before adoption of standard HTML and CSS specifications. In those times (15+ years ago), most web browsers did not implement complete HTML and CSS specifications. It was common for browsers to only implement a subset of the specification, or implement features that did not quite match the specification. There was no guarantee web browsers would render HTML and CSS precisely the same as each other. Because some of that old (practically ancient) content may still exist on the internet, quirks mode is available in browsers.

Conclusion

The <!doctype> is important for two reasons. Firstly, including it forces the browser to process the page using the appropriate render mode, increasing confidence that the browser will present the document to users as the creator expects. Secondly, including it adheres to the HTML specification from the W3, which is something all quality web developers and web content authors should strive toward.

Including the the tag is not necessary for the browser to render the HTML document (i.e. the content will still display). This creates a challenge (and one that I experience), because it can be quite easy to forget to include it since pages without it will, most likely, appear correct when testing. Therefore, everyone writing web content should remember to include the tag and make inclusion part of their standard process.

Leave a Reply