Web Development

Choosing the right document type for Web pages


One of the features of HTML standards is that each HTML document requires a document type declaration (DOCTYPE). This tells the user agent that is accessing the document what standard to use to render it. Web developers are often confused when using a document type and simply omit it. This Web Development Zone column details how to choose a document type.

Why include a document type?

The DOCTYPE appears at the top of the Web page before the opening HTML tag; it tells the browser which HTML or XHTML specification the document uses. A valid DOCTYPE means standards-compliant browsers will render the page as expected. In addition, page markup and CSS will not validate without a valid DOCTYPE.

In addition, markup will not validate without a valid DOCTYPE. Validation services like the W3C's Markup Validation Service and the Web Design Group's HTML Validator require a DOCTYPE in every page the service attempts to validate.

The DOCTYPE has three parts: the start, the public identifier, and the system identifier. (The system identifier is optional because it is not always required.) This line provides a sample of a page that conforms to the HTML 4.01 Strict standard:

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

Here is a break down of the code:

  • Start: <!DOCTYPE HTML PUBLIC
  • Public identifier: "-//W3C//DTD HTML 4.01//EN"
  • System identifier: "http://www.w3.org/TR/html4/strict.dtd">
Note: The public identifier in the list is case sensitive, so it must appear according to its definition outlined in the next section.

Available options

The current HTML and XHTML specifications have three document types: Strict, Transitional, and Frameset.

  • Strict adheres to the HTML standard with all presentation features implemented via CSS. This results in HTML markup free from the clutter of presentation elements, thus offering a clean separation of presentation (CSS) and structure (HTML). Strict emphasizes structure over presentation.
  • Transitional includes presentation attributes and elements that are expected to move to a style sheet. You should use it when you need to use presentational features of HTML because users do not have browsers that support CSS.
  • The Frameset document type is provided for sites that utilize HTML Frames. It is the same as the Transitional standard except that you use the FRAMESET element rather than the HTML BODY element.

As the first example illustrates, a URI of the standard (the complete Web address) is included when specifying a DOCTYPE. The DOCTYPE tag is automatically inserted when working with Web design software like Microsoft Expression or HomeSite, so you don't have to worry about hand coding it. The following list includes the complete DOCTYPE line to be used when the associated specifications are used:

  • HTML Strict DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • HTML Transitional DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Frameset DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • XHTML Strict DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML Transitional DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • XHTML Frameset DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • HTML 3.2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
  • HTML 2.0: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

The W3C maintains a recommended list of valid DOCTYPEs.

The missing or problematic DOCTYPE

When an incomplete, incorrect, or no DOCTYPE is included in a Web page, the presentation of the page rests on the browser or application used to view it. Most browsers have a Quirks mode that is used in these instances. In this mode, browsers violate CSS specifications in order to achieve backwards compatible layouts. The Quirks mode differs from browser to browser, and different browsers implement different quirks; therefore, this mode is not a single target. For example, Mozilla imitates Netscape 4.x. Windows IE 6 and 7, on the other hand, focus on imitating Windows IE 5. Henri Sivonen's site provides a great table that outlines how browsers behave in different modes.

Modern Web pages

Developers who have been around through the numerous iterations of Web standards are often confused by document type declarations since they never used the DOCTYPE tag in past applications. Modern Web applications that adhere to one or more standards need to include a valid DOCTYPE for proper page rendering and validation. There are many DOCTYPES available, so be sure to use the one that is appropriate for your application.

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

4 comments
jerrygivan
jerrygivan

Good documentation, however! As bluemoonsailor pointed out, needs a little extra. I develop web applications and a heavy user of CSS to cut HTML content and therefore set "strict". Unless you are using "frameset", your choice is either "transitional" or "strict". And I it appears that is what the article said but not spelled out.

Stevo
Stevo

Agree with bluemoonsailor. I am wondering why I need to put up with all the validator errors with xhtml strict (e.g. coming from outside links that use an ampersand) instead of just using HTML strict. Was hoping for a clue.

bluemoonsailor
bluemoonsailor

You missed the most important point - and why I clicked on this article: Which doctype is the correct one for my app? What's the difference? Should have had *some* meat to the article. A very very high level description of a few doctypes doesn't count. :-( Steve G.

Jerry M. Gartner
Jerry M. Gartner

And I quote: "* Strict adheres to the HTML standard with all presentation features implemented via CSS. This results in HTML markup free from the clutter of presentation elements, thus offering a clean separation of presentation (CSS) and structure (HTML). Strict emphasizes structure over presentation. * Transitional includes presentation attributes and elements that are expected to move to a style sheet. You should use it when you need to use presentational features of HTML because users do not have browsers that support CSS. * The Frameset document type is provided for sites that utilize HTML Frames. It is the same as the Transitional standard except that you use the FRAMESET element rather than the HTML BODY element." If your not sure which your web apps are, pick transitional or go to http://validator.w3.org/ and validate your sites. It will tell you exactly what you doctype is and is not. http://www.gartnerwebdev.com

Editor's Picks