/primers/html/article.php/3701321/Using-the-DOCTYPE-Tag.htm Using the DOCTYPE Tag

Using the DOCTYPE Tag

By Lee Underwood

Having trouble with your Web pages? Can't get them to display correctly in your browser? It might be that your page is a little "quirky."

There are several reasons why Web pages do not display properly, such as omitting a required end tag, improperly formatting a table, JavaScript errors, CSS errors, incorrect server requests, etc. Often, these errors happen because Web developers do not take the time to validate their work. In other cases they are a result of a lack of knowledge regarding the proper formatting and coding of Web pages.

Even if you take care of all these errors, something else may be causing your Web pages to display incorrectly or even not at all: failure to use a <DOCTYPE> statement or, if used, failure to use the right one.

A large number of Web pages don't use the <DOCTYPE> statement (Interestingly, many of them are Web development sites). Does it really make a difference? For the most part, not much. But if you want to make sure your Web site renders correctly in various browsers, then it's best to use it. You'll also need it if you plan on validating your Web pages.

The Modes

In an effort to contend with Web pages written for older browsers, the newer browser versions (Mozilla-based browsers, Netscape 7, Windows Internet Explorer 6, Mac Internet Explorer 5, Opera 7, and Safari) have two types of presentation modes: standard and quirks. Using the standard mode, the browser tries to follow W3C recommendations. When the browser goes into quirks mode, it's trying to emulate an older version of the browser. This could cause the browser to ignore your page's style sheets and render the page unusable (Mozilla and Safari also have a third mode: almost standards modes, which mainly pertains to the vertical sizing of tables).

What Is It?

The <DOCTYPE> declaration tells the browser what version of (X)HTML is being used so it will know how to display the page. The declaration may also provide a link to a text file (i.e., the loose DTD) which the browser uses to obtain further information. It's similar to having a tune-up done on your car. In order to perform it correctly, the mechanic must know the make, model, and year of the car. He must also know how many cylinders the engine has and its horsepower. Once he knows this, he can move forward and properly tune the engine.

The Specs

The W3C HTML 4.01 and XHTML 1.0 specifications state that the <DOCTYPE> is required in all documents.

The W3C sets the specifications for common protocols used on the Web. This helps to ensure that each Web site is accessible to the various user agents (browsers/viewers/readers). Technically, there are no standards regarding Web site development in relation to coding. There are only "specifications," or, as the W3C calls them, "recommendations." These specifications, however, are seen by most Web developers, as well as the creators of user agents, as being on a par with standards. Most of the current browsers (i.e., Firefox, Opera, Safari) are beginning to closely follow the specifications.

If you follow the recommendations, your Web pages (for the most part) will work correctly. If they don't, it's easier to get help when you are following the rules instead of having to explain the way that you did it. If the specs are not followed, it's more of a hit-and-miss game. You'll need to figure out what works and what doesn't. Then you'll have to recheck all of your Web pages on all of your Web sites each time a new browser hits the streets to make sure that your non-standard code works in it.


The <DOCTYPE> declaration must be the very first thing in your document, before the <html> tag. Then, when the browser begins to load the page, it knows how to treat the code within the page.

There are three different document types for HTML 4.01: Strict, Transitional, and Frameset. The Strict type is used with Cascading Style Sheets and helps to ensure clutter-free coding.

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

The Transitional type is used when HTML presentational features are included in the document instead of in a style sheet. This is done to accomodate older browsers that don't support CSS.

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

The Frameset type is used in documents that have frames.

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

The same three document types are also used in XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Since the <DOCTYPE> declaration is actually a comment tag, it won't confuse older browsers that don't understand the statement.

Additional Information

  • 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