Fix Your Site With the Right DOCTYPE!

by
Published in CSS, HTML, Layout & Grids

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

Article Continues Below
Article Continues Below

You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame.

This little article will provide you with DOCTYPEs that work, and explain the practical, real–world effect of these seemingly abstract tags.

WHY A DOCTYPE?#section2

Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.

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

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

Using an incomplete or outdated DOCTYPE—or no DOCTYPE at all—throws these same browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.

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

Clearly, this is not what you want. But it is often what you’ll get, due to the preponderance of incorrect or incomplete DOCTYPE information this article hopes to correct.

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

WHERE HAVE ALL THE DOCTYPES GONE?#section3

Since DOCTYPES are vital to the proper functioning of web standards in browsers, and since W3C is a leading creator of web standards, you might expect W3C’s website to provide a listing of proper DOCTYPEs, and you might also expect to be able to find this information quickly and easily in a single location. But as of this writing, you can’t. {Ed. Prompted in part by this article, the W3C now lists standard DOCTYPEs on its site. You will find the listing a 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 folks get up to speed on the latest technological recommendations and practices. That’s not its job.

W3C does publish a series of tutorials, though most web developers are unaware of it. Mainly, though, W3C’s site houses a collection of proposals, drafts, and Recommendations, written by geeks for geeks. And when I say geeks, I don’t mean ordinary web professionals like you and me. I mean geeks who make 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 do hunt down a DOCTYPE (generally in relation to a particular Recommendation or Working Draft), it’s often one that won’t work on your site.

Scattered throughout W3C’s site are DOCTYPEs with missing URIs, and DOCTYPEs with relative URIs that point to documents on W3C’s own site. Once removed from W3C’s site and used on your web pages, these URIs point to non–existent documents, 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 a document on W3C’s site. Since that document is on W3C’s site but not yours, 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 URI at the end of the tag. Since the tag provides a valid location on the web, the browser knows where to find it, and will render your document in standards–compliant mode.

DOCTYPES THAT WORK#section4

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

HTML 4.01 Strict, Transitional, Frameset#section5

<!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#section6

<!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#section7

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

NEXT STEPS#section8

How can you help improve support for standards on the web? Besides bookmarking this page (and copying and pasting these DOCTYPEs for your own use), if your web editor inserts DOCTYPEs, you might want to check them out and compare them to the list above.
Many well–intentioned software makers have cut and pasted incomplete DOCTYPEs from W3C into their software. Result: when you use these programs’ built–in functionality to insert DOCTYPEs in your pages, the browsers go into Quirks mode, undoing all your hard work.

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

COMING SOON#section9

We have every reason to believe that W3C’s site will soon sport a handy listing of accurate, usable DOCTYPES and other essential information in an easy–to–find location. In fact, Karl Dubost, Conformance Manager of W3C’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!

191 Reader Comments

  2. does anyone know how to use

  3. Okay, I’m a bad developer, but I was playing fast and loose with .

    I install Netscape 7.0 for PC this morning just in time for some cross-browser checking, and lo and behold, the doctype is causing my stylesheets to be utterly disregarded!

    I collapse upon the studio floor, moaning “why, why…?”

  4. Interesting results if you view this page (the one you’re looking at now) in Netscape 4.x

    Standards!

    Anyway, I was wondering if it’s possible to get the w3c to consider adding :hover as a modifier to all tags in the style sheet (think img:hover).

    Also, I’d love to be able to switch the hover color for the a tag down in the html document. Too bad I can’t assign separate style sheets to different portions of the page without using frames.

    Thanks for a gerat article.

  6. Thanks very much for your article and the useful links. w3.org is a great piece of work but it makes my head spin – I know the information is in there somewhere but it’s difficult to find under all the geekiness 😉

    I am now more confident about putting DOCTYPE into practise and also now realize an older site I made will require a custom DTD to accommodate non-standard attributes such as the LEFTMARGIN attribute on the BODY element.

    I got details about that here:
    http://www.htmlhelp.com/tools/validator/customdtd.html

    thanks again

  8. OK does anyone know how to do target=”_blank” in xhtml1.1 ?
    I downloaded the dtd from the w3c and have searched high and low for how to modify the module (if possible) but no luck…

    Thanks… just need a target 🙂

    JimS.

  9. What do you folks do with 3rd party html from things like banner exchanges and the like?

    They typically use CENTER tags and lots of deprecated stuff.
    Ok I can use transitional doctypes but how can you use the Strict
    doctypes without breaking their rules (don’t change our html)?

  10. Suzanne, you should actually put the URL part on the second line!
    I always used to put them on a single line until I changed the URL
    as per this article, and then IE5.5 stopped rendering my page!
    IE5.5 wanted to download the page instead! Talking of bugs.
    The solution was to ensure that the URL part of the W3C dtd is placed
    on the second line
    “http:/…… .dtd”>

    I am using html 4.01 transitional.

  13. This seems to be a reoccuring theme, but I’m having issues with JS and Doctypes. I’m trying to use a wonderful script from youngpup for scrolling text. It works fine on a page w/o a DocType. As soon as I put a DocType on the page it breaks in IE 5 on my Mac. Works on everything else I’ve tried with or w/o the DocType. I’ve seen some of the posts talking about changes to the DOM when browsers go into strict mode, I’ve also seen posts that deal with the JS writing invalid CSS. Can anyone help with this? I’d love to find some information on what changes in the DOM when in strict mode.

    Thanks

  14. BTW, I know I’m using tables in this page. Client needs this site to look reasonably close in Netscape 4.x, no matter how much I’ve tried to convice them otherwise. But the code validates. The JS error I am getting is “invalid procedure call or argument”

  15. Strange and unusual:

    If I use the XML declaration above the DOCTYPE dec, like so:
    —



    —
    I get this error from an apache (1.3.26) web server:
    —
    Parse error: parse error, unexpected T_STRING in /some_path_here/file.php on line 1
    —
    However it works fine on an IIS 5 web server.

    Now this is where it gets even more strange. If I use this code instead:
    —
    “; ?>


    —
    It works just fine on the apache and IIS!!!

    Anyone know what may be going on here?

  16. I spent the weekend scratching my head wondering why my carefully drawn tables wouldn’t display properly. I was drawing the tables in an old version of VisualPage and nothing I did seemed to clear up the problem.

    After a good night’s sleep, I decided to try again in a text only HTML editor and voila, my tables came out perfect……but I had no clue what made the difference.

    After reading your article, I checked the doctype and sure enough (and not surprisingly) VisualPage had an obsolete doctype while the text editor (for which I stroked my plastic on Sunday 🙂 had one of the doctypes mentioned in your article.

    Not all of us need in depth information

    Thanks for the information,
    Margaret

  17. Hey guys – nice article, I found it informative and it gave me enough information to know what I had been doing wrong in the past.

    I’ve got a problem using the transitional doc type, though … I used to use mytext and the likes, but a width on a span under transitional doesn’t seem to work – P and DIV still do, just not SPAN.

    Is this known? What is the purpose behind this behavior? What is the solution?

  18. The HTML4.01 DOCTYPEs are quick and simple to find, they live in the DTD section of the spec, which is quickly reachable from the Conformance chapter (a whole two clicks!).

    The XHTML1.0 DOCTYPEs are also easy to find, in the Document Conformance section.

    Oh, and an XHTML document without an XML Declaration is invalid. Read the “Document Conformance” section of XHTML 1.0 and the “Prolog and Document Type Declaration” section of XML 1.0 (Second Edition)
    Links:
    http://www.w3.org/TR/xhtml1/#normative
    http://www.w3.org/TR/2000/REC-xml-20001006#sec-prolog-dtd

    The list of TRs is at http://w3.org/TR/, which is a nice big link named “Technical Reports” on the main page.

    Then again, maybe I’m just one of those geeks that makes the rest of you look like first-day AOlers, back in 1997.

  19. Great article. Just recently I was having problems with my cascading menu and by sheer chance found out the cause was an incomplete DOCTYPE statement…did I feel a charlie LOL.
    Now I know the reason fully thanks to the explanation in this article 😉

  20. Hello, the article was great, I finally know a little more about these obscure tags that I have always wondered about… Justin Simoni’s comment is at least as sharp as he and his cool scripting is! He is right. Doesn’t anyone think that they would need a ton of Gb of bandwidth to accomodate that kind of network traffic?

    Anyway, the main reason why I am posting here is because I am still majorly confused about something:
    My site works great in all major browsers (at least from my computer) WITHOUTH the doc type tag and when I add that it doesn’t work in Mozilla/Netscape anymore.
    I tested my site in IE5/6, Opera 5/6, Netscape4/6 and it worked in all of them without the tag but when I add the tag my interface gets screwed up and of course I loose the scrollbar related features… Is there ANY WAY to avoid this? Is there a doctype that will allow my site to display properly in all browsers and keep the features on ie?

    I have notice all these comments are very old so if somebody reads mine and finds it in him/her to suggest something to me please let me know via email at webmaster@featherfactory.org

  21. Not lazy, far from it having spent aaaagggggeeees trying to work out this doc type thing, just an amateur. Most of my docs are checking out as 3.2 so, what is the http thing that I put underneath the doc type? Can’t find it anywhere, if it exists.

    Bit bothered by whether it is really necessary or not – my quote of the week from http://www.wordspy.com was, “There is nothing so useless as doing something efficiently that didn’t need to be done”.

    I have got Tidy to tell me the doctype – if I do need http for 3.2, please someone tell me where to find it? – nearing end of tether – though this article provided some welcome perspective 🙂

  22. If an earlier post appears from me, apologies, it seems to have disappeared into the ether. The gist … if Tidy tells me my doc is 3.2, do I need the http stuff after the DOC TYPE bit? If so, please, what is it? (Not answered by following link in posts above).

    Thanks, good article,

    Frazzled Amateur, at end of tether trying to get it right 🙂

  23. This snippet from the article is now outdated:
    “You can search for DOCTYPEs all day at w3.org without finding one page that lists them all. And when you do hunt down a DOCTYPE (generally in relation to a particular Recommendation or Working Draft), it’s often one that won’t work on your site.”

    On the W3C site, there finally *is* a list of doctypes one can use:
    http://www.w3.org/QA/2002/04/Web-Quality

  24. I have no errors when I validated my page as strict XHTML, but still it says that my page is not valid. I have no idea what could be wrong with my page! Any suggestions?

  25. As iam doing project regarding HTTP protocol.
    I want to know the difference between HTTP/1.0 and HTTP/1.1 version

  26. This is the DTD I have been using:


    It validates using the w3C validator, but seems to throw IE6 into quirks mode unless I remove the “” line, even though it is not the first line.

  27. I usualy validate my pages with W3C but i am getting this doc type error and i cannot get rid of it. I have 4 errors on my page..all attribute errors. im thinking if i clear up the doc type issue the others will be resolved. Any help would be VERY appreciated.
    http://www.vectorbytez.com
    thanks

  29. — or, Bad Developer! No Biscuit!

    This article is a very clear explanation of a topic I wasn’t finding very clear. Thank you.

    Looking through back issues of ALA, I read

    http://alistapart.com/stories/msn/
    Hakon Wium Lie, “MSN, Opera, and Web Standards”

    Which, among other points, rightly castigated MSN for booting Opera users on the grounds of noncompliance, while the MSN site code was itself noncompliant. For a start, most of the MSN pages Lie looked at had no DOCTYPE declaration.

    “Interesting”, says I, “I wonder if things have changed since Lie wrote the article in 1991.”

    I went to support.microsoft.com, http://www.microsoft.com, http://www.msn.com and found no DOCTYPE declarations at all, as far as the eye could see (or randomly surf around, anyway). I went to Lie’s own home page, http://people.opera.com/howcome/ and found, whoops!, no DOCTYPE there, either. tut, tut. Not to mention that the a-ring

  30. I found your site when looking for help in finding a Doc Type that will work with my site. I have tried several including the ones on your page, but everything I try messes up my sub menu on many browsers.

    The page validates if I use one. I have been trying the transitional 4.01’s mostly. Any help is appreciated.

    Site: http://zionnational-park.com

  31. This article is fairly useful in giving a basic overview of what to do about choosing the right DTD for the job, but my problem doesn’t seem to be addressed… I’ve got “
    ” as the first two lines in all of my pages and yet… no matter what I seem to do… IE6 ALWAYS seems to display them as the collapsible XML source!! What am I doing wrong?? My code validates–IE is just being retarded!

    Any ideas?

  34. I was trying to validate a page and was told by the validator that I must use a DOCTYPE. I tried the but it makes my site ignore the CSS in Mozilla and Netscape 7. Is there any simple reason for this without seeing the code?

  35. After reading through all the pages of the thread which I didn’t realise were there I see that other have the same issue… I still can’t getting it to look right in Moz/NS7 with the DOCTYPE ??? Any ideas please tell me! Email *** miles at streetdaddy dot com ***

  36. I had great fun to read your articles since it tells the exacts mistakes i’ve done before to find your page : I did Validate w3c home page with w3c html validator, considering good results i copyed this XML doctype on my pages…
    I realise now, how people can make the same stupid thinks and how it can be a “kind of false empiric logic”. Thanks !

  37. So here’s the thing. My code validates to HTML 4.01 with the W3C online validator. IE6 renders it perfectly using the strict or transitional DTD’s (standards mode) however Netscape7 loses the pages external stylesheet when in standards mode, so I’ve ended up using a quirks mode 4.01 DTD. Anyone had this problem?

    ta

  39. Instead of externally linking to your css file, call it as an SSI – sure, it’s a workaround, and depends on you running some flavour of server side scripting, so not ideal but will work.

  40. What are the implications for intranet developers?

    Standards are great and much needed. But back to the question of backstage DOCTYPE functionality: does my IIS box cache a copy of the W3 definitions? What if our Cisco box or firewall punts? Does my intranet go down in flames with it? Or on a larger scale, could a rabid pack of mentally unstable geeks hit W3.org with Denial of Services Attacks and take out the whole shooting match? With those risks, I’m better off with no DOCTYPE declaration at all and voluminous

    and tags.
  41. Pingback: Ancestors and Descendants - The web development company

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

I am a creative.

by
A List Apart founder and web design OG Zeldman ponders the moments of inspiration, the hours of plodding, and the ultimate mystery at the heart of a creative career.
Career