HTML Tip:
Declare Your DOCTYPE

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

You've carefully written and edited your HTML code, validated your style sheets, and painstakingly debugged your JavaScript code. But the page STILL doesn't look right! You could swear that some browsers are completely ignoring parts of your code.

Well, maybe they are. Do you know what your DOCTYPE is and what it's doing?

Yes, You DO Need A DOCTYPE!

A DOCTYPE (also called a DTD) is short for "document type declaration." It's a good idea to always explicitly declare the DOCTYPE at the beginning of your HTML or XHTML documents because the browser uses that information to properly to display the page elements and attributes in your code.

An incorrect or incomplete one can break your page display in some browsers.

More recent, standards-compliant browsers like Mozilla, Internet Explorer 6.x, and Netscape 6.x and up rely on a proper DOCTYPE definition to display Web pages. It's particularly important if you're coding in XHTML instead of basic HTML 4. Opera is much less forgiving because it always displays pages in standards compliant mode. It catches - and displays - mistakes that other browsers overlook. That's what makes it such a good browser for testing.

A missing DOCTYPE isn't a fatal error. Your page will still display in the browser, but maybe not how you expect. An incorrect DOCTYPE definition will often send the browser into something called "quirks mode."

Back To The Past In Quirks Mode

Quirks mode is an unusual thing. The browser forgets much of what it knows about World Wide Web Consortium (W3C) standards, CSS compliance, and the most recent Document Object Model (DOM). Instead, it renders the page according to the rules set by older browser versions like Explorer 4 or even Netscape 4.7.

It's as if your big screen TV were to suddenly begin showing nothing but black and white reruns of 1950's TV shows - in the size of those early televisions (approximately 9-10 inches).

The big problem: each current browser and browser version acts differently in quirks mode. A technique that looks fine in Explorer 6 may not display at all in Netscape 6 - even though it looks fine in Netscape 7. Since you can't predict what browser or operating system visitors may be using, you really can't predict what type of page display they'll get in quirks mode.

Browser Photo helps you find the problems because it shows you actual screen shots of your page in 16 different browsers, browser versions, and operating system combinations. But once you find the problems, you'll still need to fix them.

In some cases, that means adding or correcting your DOCTYPE so that the browser knows which version of HTML you want to use and how strictly you want to adhere to the standards.

Finding The Correct DOCTYPE

Many HTML editors automatically insert a DOCTYPE when you create a page. However, it isn't always the DOCTYPE you expect - or want.

For instance, HomeSite 4.5 automatically inserts this DOCTYPE:

Which is fine for pages written using HTML 4.0 that include some formatting tags like FONT, B, and I. But you'll need to modify the DOCTYPE whenever your design uses HTML 4.01, XHTML, or you create a frameset.

The W3C provides this listing of valid DOCTYPEs. It's pretty comprehensive, but most often you'll choose between just two, so we'll list them here:

This is the "transitional" definition. You're telling the browser that you want to use HTML 4.01 standards to render the document, but that you may decide to slip in some deprecated tags for formatting instead of using only CSS for presentation. Deprecated tags are those that are marked for deletion in future versions of HTML/XHTML.

The "frameset" mode also lets you use deprecated tags like FONT and CENTER and it adds the necessary support to help the browser render the frameset correctly.

Place your DOCTYPE definition at the very beginning of your Web page - even before the opening HTML tag. Type it very carefully! DOCTYPE definitions are capital-letter sensitive. The cut and paste method is far safer than typing it by hand at the beginning of each page.

The proper DOCTYPE could save you hours of frustration and debugging time. Isn't that worth the small effort it takes to add a single line of code to all your Web pages?