April 12, 2002

Fix Your Site With the Right DOCTYPE!

by Jeffrey Zeldman

• Published in: CSS, HTML and XHTML, Layout, XML |

• Discuss this article »

You’ve done all the right stuff, but your site doesn’t look or work as it should in the latest browsers.

You’vewritten valid XHTML and CSS. You’ve used the W3C standard DocumentObject Model (DOM) to manipulate dynamic page elements. Yet, inbrowsers designed to support these very standards, your site isfailing. A faulty DOCTYPE is likely to blame.

This littlearticle will provide you with DOCTYPEs that work, and explain thepractical, real–world effect of these seemingly abstract tags.

WHY A DOCTYPE?

PerHTML and XHTML standards, a DOCTYPE (short for “document typedeclaration”) informs the validator which version of (X)HTML you’reusing, and must appear at the very top of every web page. DOCTYPEs area key component of compliant web pages: your markup and CSS won’tvalidate without them.

As mentioned in previous ALA articles (and in other interesting places),DOCTYPES are also essential to the proper rendering and functioning ofweb documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win.

Arecent DOCTYPE that includes a full URI (a complete web address) tellsthese browsers to render your page in standards–compliant mode,treating your (X)HTML, CSS, and DOM as you expect them to be treated.

Usingan incomplete or outdated DOCTYPE—or no DOCTYPE at all—throws thesesame browsers into “Quirks” mode, where the browser assumes you’vewritten old-fashioned, invalid markup and code per the depressingindustry norms of the late 1990s.

In this setting, thebrowser will attempt to parse your page in backward–compatible fashion,rendering your CSS as it might have looked in IE4, and reverting to aproprietary, browser–specific DOM. (IE reverts to the IE DOM; Mozillaand Netscape 6 revert to who knows what.)

Clearly, this isnot what you want. But it is often what you’ll get, due to thepreponderance of incorrect or incomplete DOCTYPE information thisarticle hopes to correct.

(Note: The Opera browser does notplay by these rules; it always attempts to render pages instandards–compliant mode. Go, Opera! On the other hand, Opera does notyet offer solid support for the W3C DOM. But they’re working on it.){Ed: Since this article was first published, Opera has delivered theDOM-compliant Opera 7 browser.}

WHERE HAVE ALL THE DOCTYPES GONE?

SinceDOCTYPES are vital to the proper functioning of web standards inbrowsers, and since W3C is a leading creator of web standards, youmight expect W3C’s website to provide alisting of proper DOCTYPEs, and you might also expect to be able tofind this information quickly and easily in a single location. But asof this writing, you can’t. {Ed. Prompted in part by this article, theW3C now lists standard DOCTYPEs on its site. You will find the listinga few screens into the W3C tutorial, “My Web site is standard. And yours?”}

W3.org is not A List Apart, WebReference, or Webmonkey.It’s not intended to help web designers, developers, and content folksget up to speed on the latest technological recommendations andpractices. That’s not its job.

W3C does publish a series of tutorials,though most web developers are unaware of it. Mainly, though, W3C’ssite houses a collection of proposals, drafts, and Recommendations,written by geeks for geeks. And when I say geeks, Idon’t mean ordinary web professionals like you and me. I mean geeks whomake the rest of us look like Grandma on the first day She’s Got Mail.™

You can search for DOCTYPEs all day at w3.org without finding one page that lists them all. And when you dohunt down a DOCTYPE (generally in relation to a particularRecommendation or Working Draft), it’s often one that won’t work onyour site.

Scattered throughout W3C’s site are DOCTYPEs with missing URIs, and DOCTYPEs with relativeURIs that point to documents on W3C’s own site. Once removed from W3C’ssite and used on your web pages, these URIs point to non–existentdocuments, thus fouling up your best efforts and the browser’s.

For instance, many sites sport this DOCTYPE, copied and pasted directly from w3.org:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

If you look at the last part of the DOCTYPE(“DTD/xhtml1-strict.dtd”), you’ll see that it is a relative link to adocument on W3C’s site. Since that document is on W3C’s site but notyours, the URI is useless to the browser.

The DOCTYPE you’d actually want to use is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Notice that the latter DOCTYPE includes a complete URIat the end of the tag. Since the tag provides a valid location on theweb, the browser knows where to find it, and will render your documentin standards–compliant mode.

DOCTYPES THAT WORK

So what DOCTYPEs should we use? Glad you asked. The following complete DOCTYPEs are the ones we need:

HTML 4.01Strict, Transitional, Frameset

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


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


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

XHTML 1.0 Strict, Transitional, Frameset

<!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">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

NEXT STEPS

Howcan you help improve support for standards on the web? Besidesbookmarking this page (and copying and pasting these DOCTYPEs for yourown use), if your web editor inserts DOCTYPEs, you might want to checkthem out and compare them to the list above.

Manywell–intentioned software makers have cut and pasted incompleteDOCTYPEs from W3C into their software. Result: when you use theseprograms’ built–in functionality to insert DOCTYPEs in your pages, thebrowsers go into Quirks mode, undoing all your hard work.

It’sworth contacting the folks who make your favorite authoring package,showing them the proper DOCTYPEs, and politely requesting them toaddress this issue in an incremental upgrade. (In some cases, you mayalso be able to modify your editor yourself.)

COMING SOON

Wehave every reason to believe that W3C’s site will soon sport a handylisting of accurate, usable DOCTYPES and other essential information inan easy–to–find location. In fact, Karl Dubost, Conformance Manager ofW3C’s Quality Assurance team, contributed to the information in this little article.

Likewise, when The Web Standards Project relaunches (real soon), it will also provide this information. {Ed. note: The Web Standards Project relaunched in late 2002.}

But sites are being designed and built every day, and you need this information now—so there it is.

Happy authoring and rendering!