The !DOCTYPE Tag and Its Effect on Page Rendering

By Rob Gravelle

 I never gave much thought to the DOCTYPE tag because my HTML editor always included it in the page template. It wasn't until the arrival of HTML5 that I noticed how much it had changed since version 4. Around the same time, I also noticed that my browser - Internet Explorer 9 (there I said it!) - was switching to "quirks mode" when loading certain pages. Then, a little later, I put two and two together and came to understand that the two were related. In today's article, we'll see how as we learn about the DOCTYPE tag and it's effect on page rendering.

What Is the DOCTYPE?

The DOCTYPE declaration, which should be the first tag in the source markup of any web page, is utilized by the web browser to identify the version of the markup language in which the page is written. It may contain a link to a Document Type Definition, or DTD for short. The DTD sets out the rules and grammar for that flavor of markup, thus enabling the browser to render the content accordingly.

You can thank Microsoft for many of the features of this enigmatic tag because it was they who, while developing Internet Explorer 5, discovered that they had improved standards support so much, that it caused older pages to display incorrectly in browsers. To fix the problem, they modified the DOCTYPE tag so that it could designate that the page be rendered either in "quirks mode" or "standards mode.". Later, when Mozilla released Netscape 1.1, they inadvertently broke thousands of pages that relied on one or two specific quirks. Their solution was the advent of "almost standards mode."

The arrival of HTML5 simplified the DOCTYPE declaration to <!DOCTYPE html>. According to the WWW3 site:

Doctypes from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the doctype is only needed to enable standards mode for documents written using the HTML syntax. Browsers already do this for <!DOCTYPE html>.

To support legacy browsers that don't recognize the preferred short DOCTYPE, the DOCTYPE <!DOCTYPE html SYSTEM "about:legacy-compat"> is allowed, as are the older HTML 4.0, HTML 4.01, XHTML 1.0, and XHTML 1.1 doctypes, though just to be clear, their usage is discouraged by the WWW3.

DOCTYPE Tag Syntax

Now that we've established what the various DOCTYPE declarations are, let's go over the syntax for each.

HTML 3.2

This specification is only used in old documents and would therefore render in quirks mode in any modern browser.


HTML 4.01

HTML 4 has numerous different DOCTYPE definitions to specify the various standards compliance levels. These can be divided into "loose" and "strict" categories:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">




As stated previously, HTML5 greatly simplifies the DOCTYPE tag to only require the (HTML) language attribute:

<!DOCTYPE html>

There is a provision for software generating HTML code that requires that either a PUBLIC or SYSTEM identifier be included. In that case, the SYSTEM keyword may be coded followed by the value "about:legacy-compat" enclosed in double quotes:

<!DOCTYPE html SYSTEM "about:legacy-compat">

Choosing the Correct DOCTYPE

It's important to use the right DOCTYPE declaration to the page content. To paraphrase Richard Dreyfuss's character in Close Encounters, "[it's] important. [It] means something." Ideally, what it means is that your pages will display as intended and as consistently as possible across multiple browsers. Here are the steps that your decision making process should follow:

The HTML5 DOCTYPE is the most up-to-date standard, and is the preferred choice for all new documents. It adds support for all the new HTML5 features like sectioning elements, new semantic elements, new form types, new multimedia elements, and a lot of great APIs to extend your web applications.

If for whatever reason you don't want to use the HTML5 DOCTYPE, then you should use the HTML 4.01 Strict DOCTYPE. It gives better browser compliance so that your pages will display more consistently. The HTML 4.01 Strict DOCTYPE also removes all the deprecated tags from the specification. When using strict DTDs to validate your HTML, make sure that they are correct. Strict DOCTYPEs are great for creating pages that are absolutely correct against the standard, but not all browsers handle the alternatives to tags that are missing, such as:

  • <frame>
  • <frameset>
  • <noframes>
  • <basefont>
  • <big>
  • <center>
  • <font>
  • <strike>
  • <tt>
  • <acronym>
  • <applet>
  • <isindex>
  • <dir>

HTML 4.01 Transitional DOCTYPE is the best choice after HTML5 or HTML 4.01 Strict. At this time, it's the most ubiquitous DTD in use. It lets you use the older deprecated tags like FONT that are no longer part of the strict HTML 4.01 specification. The drawback is that this DOCTYPE does not provide as much consistency across browsers. As a result, pages that use it are going to be more difficult to maintain as well as appear differently across browsers. Also be mindful that if you leave off the URI the browser is thrown into quirks mode and if you don't, the browser stays in standards mode. Therefore, to ensure standards mode, use the following DOCTYPE if you must use HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">


The 3.2 DOCTYPE and Older

HTML 3.2 is best reserved for very basic HTML or older pages. Much of the time the HTML5 DOCTYPE also supports 3.2 elements. This DOCTYPE is best suited for pages that are being built for very simple cell phones, i.e., not smartphones or feature phones.

There is also a DOCTYPE for HTML 2.0, but this is hardly ever used any more. Like the HTML 3.2 DOCTYPE, most of the features of HTML 2.0 are supported in HTML5, so it makes more sense to use that DOCTYPE instead.

Last but not least, omitting the DOCTYPE tag completely all but guarantees that the browser will render the page in quirks mode.




This article was meant to provide a basic overview of the DOCTYPE tag. As such, I didn't go into detail on the complexities of choosing a DOCTYPE declaration for Internet Explorer. Suffice to say, it isn't always easy! Here's an excellent article that goes into greater depth on the subject.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date