A List Apart: Comments on: Fix Your Site With the Right DOCTYPE!

Posted by: Dave Robbins

2012-01-31T13:00:49+00:00

Great article! I've been searching the W3C and other sites for this information to no avail. Keep up the good work.

Posted by: riffola

2012-01-31T13:00:49+00:00

IE6 triggers quirks mode if there is an XML declaration present. It requires the XHTML doctype to be the very first line to trigger standards mode.

Posted by: Matthew Mullenweg

2012-01-31T13:00:49+00:00

Copied directly from the article: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Should that have the '>' after //EN" ? Looks like a typo, correct version at http://www.w3.org/TR/xhtml1/#normative (only the > is different). Great article as always! Some other good DOCTYPE resources: http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/ http://developer.apple.com/internet/html/doctype.html http://www.meyerweb.com/eric/dom/dtype/dtype-grid.html http://www.people.fas.harvard.edu/~dbaron/mozilla/quirklist (Good info about Mozilla quirks) Straight from the source: http://mozilla.org/docs/web-developer/quirks/ (I got a laugh out of some of the public identifiers :) http://msdn.microsoft.com/workshop/author/css/overview/cssenhancements.asp http://lxr.mozilla.org/seamonkey/source/layout/html/document/src/quirk.css (Mozilla's quirks stylesheet! Gotta love the irony.)

Posted by: sharding

2012-01-31T13:00:49+00:00

> IE6 triggers quirks mode if there is an XML declaration present. You've got to be kidding me. Is this seriously the case? Doesn't the standard REQUIRE the XML declaration at the top, above the DOCTYPE tag? So, once again we're thrown into the sitation of having to either write documents that comply with the standards or documents that work in popular browser, but we can't have both at the same time. Sigh.

Posted by: adamd

2012-01-31T13:00:49+00:00

I was playing around with the DTDs. When I used the xHTML strict listed in the article, I get an error stating "Fatal Error: unrecognized {{DOCTYPE}}; unable to check document" Am I doing something wrong or is this another problem I can blame GW. by the way my site validates as xHTML 1.1. have a nice day!

Posted by: riffola

2012-01-31T13:00:49+00:00

No, the XML declaration is optional, as long as you specifiy the page's character encoding using a Meta tag, the page will be valid XHTML, even XHTML 1.1

Posted by: riffola

2012-01-31T13:00:49+00:00

Assuming that the rest of the code is already valid, of course.

Posted by: kr!5

2012-01-31T13:00:49+00:00

good article - thanks, but I'm still unclear as to which doctype to use. The article lists the doctypes for Strict, Transitional, and Frameset, but what are these? - obviously the type of (X)HTML you're using - but I'm only clear on what version number I'm using - not Strict, Transitional, or Frameset. Can anybody enlighten me?

Posted by: Kevin W

2012-01-31T13:00:49+00:00

Frameset means that the page is a frameset—it doesn't actually have any content, just frames of other pages. Transitional is a normal page, but it means that you're using deprecated (http://www.w3.org/TR/html4/conform.html#deprecated) elements and/or attributes. Strict is the same as Transitional, but without the deprecated elements/attributes.

Posted by: justin simoni

2012-01-31T13:00:49+00:00

So someone clear up what the browser is actually doing when it wants a doctype. Is it actually going out to the URI you state in the doctype, fetching + parsing the information and changing the chartacteristics of it's rendering because of this? or, is the browser just matching the doctype it sees on the top of your html document to a list of known doctypes it stores and does it that way. It just seems peculiar that the W3C will allow every single webpage in existence that has a doctype pointed to it to use it's resouces. Does anyone see the problem with that? (network latency, general download time) What if, like Netscape did with I believe the RSS doctype, they just decide to move, and tweak it. We'd be quite up the river with no paddle. It also doesn't make much sense to make web developers to post a doctype locally on a site and make them call the doctype from there. It makes something that should be soooo simple much too complex. Viddying the doctype itself doesn't really shed much light on what it actually does. sort of odd that HTML 4.01 would have a doctype, since aren't doctypes one of those XML things? :)

Posted by: Ivan Wilson

2012-01-31T13:00:49+00:00

Nice article, I already knew where the DOCTYPEs were located in the site. But, it's true; it's a virtual Indiana Jones type quest just to find them. Anyway, this article came MINUTES after I was just putting the final touches to a CMS (Content Management Site). At least it's good to know that I did everything right. Now, it's Miller Time!

Posted by: Kevin W

2012-01-31T13:00:49+00:00

"So someone clear up what the browser is actually doing when it wants a doctype. Is it actually going out to the URI [...]? or, is the browser just matching the doctype it sees on the top of your html document to a list of known doctypes [...]" Pretty unlikely that a browser actually cares whether the URI is valid or not, let alone what's inside it. "What if, like Netscape did with I believe the RSS doctype, they just decide to move, and tweak it." That's why they won't move it ;-)

Posted by: Kevin W

2012-01-31T13:00:49+00:00

Is there a reason why everyone puts the DOCTYPE declaration on two lines (the URI on the second)? Or is it just because it's supposed to be easier to read?

Posted by: Greg H.

2012-01-31T13:00:49+00:00

>> IE6 triggers quirks mode if there is an XML declaration present. > You've got to be kidding me. Is this seriously the case? Unfortunately, it is. I've confirmed it on my own. The only way to trigger "standards" mode in IE6 is to forego the use of the XML declaration. > Doesn't the standard REQUIRE the XML declaration at the top, above the DOCTYPE tag? If you use both an XML declaration and a DOCTYPE, the XML declaration *must* be on the first line, followed by the DOCTYPE on the second line. But as riffola said, you can lose the XML declaration if you specify the document encoding type in a element. This may not be ideal, but it's a valid workaround. Our salvation is that Microsoft will have released a new browser version by the time the next version of XML is released and we're forced to use an XML declaration to comply. > Is there a reason why everyone puts the DOCTYPE declaration on two lines (the URI on the second)? Or is it just because it's supposed to be easier to read? It's easier to read. Like most anything in XML, the amount of white-space between different parts of an element (element names, attributes, etc.) is irrelevant so long as there is any amount. You can have a dozen spaces, five tabs, and 16 line breaks between each element part and the parser won't care.

Posted by: komlenic

2012-01-31T13:00:49+00:00

Thanks much for the clarity Greg. I've been searching for the answer to the xml-declaration-IE-quirks-mode bug for some time, and had no idea that it could be so obvious a solution. Good article as well: concise, and informative.

Posted by: Wevah

2012-01-31T13:00:49+00:00

> sort of odd that HTML 4.01 would have a doctype, since aren't doctypes one of those XML things? :) Nope...they're one of those SGML things. Even HTML 3.2 has a DOCTYPE. Another thing that's been bugging me: BBEdit likes to use DOCTYPES like this (for XHTML 1.0 Transitional, for example): which, if you bother to go to the URL specified, contains a proper XHTML DTD (the same one, I'm fairly certain, as if you go to the URL specified in the article). This URL causes browsers to enter standards mode (good), and is valid according to the W3C (X)HTML validator (also good). However, when one attempts to run a page with this DOCTYPE through the W3C's CSS validator, it chokes, proclaiming it an invalid DOCTYPE (which it clearly is not). Annoying.

Posted by: Kris

2012-01-31T13:00:49+00:00

HTML4.01/3.2/2.0 DOCTYPES: http://www.htmlhelp.com/tools/validator/doctype.html Some VERY useful info on DOCTYPES and browser behaviour: http://www.allmyfaqs.com/faq.pl?DOCTYPE

Posted by: Didier

2012-01-31T13:00:49+00:00

There´s one thing I don´t understand about this one: Does the lang="en" elements refer to the language used in the document? Do I have to write lang="fr" if there´s french text on the page?

Posted by:

2012-01-31T13:00:49+00:00

spam spam spam

Posted by: Jackie McGhee

2012-01-31T13:00:49+00:00

Yes, lang="en" says that the document is in English. If you have some inline French you can stick it in le blah.

Posted by: Jeffrey

2012-01-31T13:00:49+00:00

Wonderful comments, and thanks for catching the typo, Matthew. Several questions raised here are answered in documents linked from the article. For instance, the optional xml prolog causes problems in many browsers, not just IE6. Though it's part of the XHTML standard, it's an OPTIONAL part, precisely because its use causes problems in old browsers as well as some new ones. This is covered in more detail in the XHTML Guidelines section of the NYPL Style Guide: http://www.nypl.org/styleguide/xhtml/guidelines.html The Style Guide is linked from the article, and the XHTML Guidelines section is linked from "Better Living Through XHTML" (which is linked from the article).

Posted by: Janos Erdelyi

2012-01-31T13:00:49+00:00

now that we can render in a more compliant way, does anyone know when we can expect to see a strictly rendering browser? as a developer, i would personally like a developer version of a browser which takes no crap from me and chokes up and any non-compliant mark-up. really i'd like it to help me force the developers i work with into doing basic stuff like closing tags and proper nesting :P seriously though, has anyone heard of such a user-agent? i've played with amaya (from the w3c), but its results are sometimes bafling and i wonder how correct they are.

Posted by: David Harris

2012-01-31T13:00:49+00:00

I'm sorry, but all this article does is complain about how so many Web sites don't use proper doctypes, then goes and provides a list of doctypes, that were already available in many other places on the Web. Where's the beef, Zeldman? A perfect example: IE reverts to the IE DOM; Mozilla and Netscape 6 revert to who knows what. Umm, well, why don't you ask them? This is called "Lazy author's syndrome," and is consistent with many articles you find online. It's when the author is too lazy to either find out the complete information and provide a much more robust and helpful article, or to simply leave out the unhelpful snide remarks. Where is the discussion about all those folks who are using incorrect doctypes on purpose? I know some big-name shops (such as IBM) where the DOCTYPE tag is purposely incomplete so they can get IE-specific features like changing scrollbar colors. I'm disappointed by this article. It looks like a combination rant and cut-and-paste from other places on the Net, and is trying to pass for something semi-original. It's not. It's a hack job at it's worst.

Posted by: jeffrey

2012-01-31T13:00:49+00:00

Two hours before this article went live, I was contacted by a standards-aware developer who wondered if I knew why his carefully authored site was displaying incorrectly in Mozilla 0.9.9. I did. The answer was in this article. Despite all his knowledge and care, this developer had used the wrong DOCTYPE because that's what he found at the source (W3C). The HTML editors I use contain incomplete DOCTYPEs that trigger Quirks mode in all standards-compliant browsers but Opera (which avoids DOCTYPE switching, per the article). These HTML editors are market-leading products, developed over years, by people who care about proper web authoring. They contain the wrong DOCTYPEs because a straightforward listing of proper DOCTYPEs is currently impossible to find at the source (W3C). W3C standards (and other standards) are essential to the growth of the web, but w3.org's Information Architecture leaves something to be desired, as they will be the first to admit. And this is so for the reasons stated in the article (W3C is not a tutorial site, it's a repository for a huge and growing collection of deeply geeky documents.) David, you may have known where to find all the proper DOCTYPEs, but I didn't until I did the research for this article, and neither do many working web designers and developers (as well as some leading software makers). This article is intended as a service to the working designer and developer -- folks who don't have time to hunt down this information in various scattershot locations, and will appreciate its being made available in one place. Also, I think you've mistaken editorial focus for "laziness." This little article is intended to do one thing: give readers the proper DOCTYPEs. They don't need a multi-paragraph digression on what previous DOM Mozilla/Netscape 6 may revert to if the wrong DOCTYPE is used. All they need to know is that, with the right DOCTYPE, Mozilla/Netscape 6 will support the W3C DOM. If you're looking for a more extensive and more detailed examination of web standards in browsers, you'll find many such articles in the PREVIOUS STORIES section of this magazine.

Posted by: saturdave

2012-01-31T13:00:49+00:00

One way to play around with all the different DOCTYPES is to go to the W3C's Validation page (http://validator.w3.org/) & paste in your URI. The page allows you to select different DOCTYPES in order to check the validity of the code you've written. Also, if you check the "Show Source" box, the exact DOCTYPE syntax will appear in the result for cut & paste fun. Great article - something that needed to be addressed. Thanks.

Posted by: Craig Shoemaker

2012-01-31T13:00:49+00:00

What do you now of DOCTYPEs breaking JS functions? I am trying to create a JS persistent nav bar in the spirit of the GeoCities watermark and once I insert the XHTML Transitional DOCTYPE into my document, the script no longer works. ============ Example JS : ============ http://builder.cnet.com/webbuilding/0-7690-8-5934478-9.html?tag=st.bl.7310.dir1.7690-8-5934478-9 ============

Posted by: Craig Ramsdell

2012-01-31T13:00:49+00:00

Thanks for the helpful article. It answered several questions I had. But I've got one more. Does anyone know if there's and advantage to copying the DOCTYPEs from W3C and posting them locally? Do the browsers actually go look at the W3C DOCTYPEs? Or are the browsers just reading the URIs like they would a tag? In which case posting the DOCTYPEs locally would render them useless.

Posted by: Andrew Clover

2012-01-31T13:00:49+00:00

1. Are you using embedded scripts? The example at the above URL uses a script tag with the comment-hiding trick. This will make a true XML parser ignore the entire script, as XML parsers cannot treat script and style tags as containing anything but XML. There are ways to make the comment-hiding hack work in both HTML and XML at the same time, but it's not pretty. Try removing the comment hack or, best, using an external script instead. 2. The script contains an ETAGO sequence (

Posted by: J

2012-01-31T13:00:49+00:00

One hting I've never been able to figure out is whether or not the line wrap and the tab white space on the second line is required. For coding sake, espeically on my dnamic sites I'd prefer to have it all on one line. Also, another reader above asked if the browser actually goes to the url in question. I don't think it does in certain cases (when you use the ones listed in the article) but does it if you put another address in there? That could be an issue one might need to consider on an intranet where the DTD might be on the other side of the firewall.

Posted by: J

2012-01-31T13:00:49+00:00

Am I the only one who is havig trouble validating XHTML 1.0 Transitional documents using the provided DTD? I get [b]Error: DTD did not contain element declaration for document type name[/b] if I don't change the "DOCTYPE HTML PUBLIC to "DOCTYPE html PUBLIC"

Posted by: tim

2012-01-31T13:00:49+00:00

The Doctype given for XHTML 1.0 transitional creates errors in the W3C validation service. What gives? I used to get validation when using the Doctype that this article says is incorrect.

Posted by: moz

2012-01-31T13:00:49+00:00

it seems to me that the notion to use the W3's website as the host in the URI is wrongheaded for two reasons. one, doing so causes the visiting user agents to reference the DTD on the W3's website and thus costing the W3 a great deal of bandwidth. two, updating DOCTYPES on your website quickly becomes a function of N where N is the number of webpages you wish to validate; perhaps a potentially large and daunting number. i think a better solution would be not to change your DOCTYPEs at all, and instead upload a copy of the DTD to your website in a directory called "DTD". (you may need to do this for every subdirectory that contains webpages you wish to validate properly.) that would seem to save on bandwidth for the W3C and save on work for you (isn't it better to upload 3 files for 3 directories rather than modify some 20 odd files?). one other note. the transitional dtd is not small -- 32k -- and using it to validate your website might be a bandwidth concern for visitors as well. (would it make any validating webpages produced for the 5k a pipe dream?) it might be best for some to leave your webpage in quirks mode after all...

Posted by: RPW

2012-01-31T13:00:49+00:00

I'm getting the same validation failures as J in the above post. It seems that with the doctype for XHTML 1.0 Strict at least ( I haven't tested the others), it is critical to start with "

Posted by: Jeff Carr

2012-01-31T13:00:49+00:00

Yup J, capitalization does matter. XML and XHTML are caps sensitive. The element and the element are different animals as far as an XML parser is concerned. So when you set the DTD to "DOCTYPE HTML PUBLIC" you are setting the doctype to an element that is not included in your DTD.

Posted by: Nate

2012-01-31T13:00:49+00:00

It seems that there is a small error in the doctypes listed for xhtml strict? - after fixing our site with the proper doctype it stopped validating, the same problem listed by [url="http://www.alistapart.com/stories/doctype/discuss/#ala-73"]adamd[/url]. Changing the �HTML� to lowercase �html� seems to have fixed the problem.

Posted by: Nate

2012-01-31T13:00:49+00:00

Everyone's posting about the lowercase problem at once. My public apologies for not minding the not at the top and messing things up with html in my last post.

Posted by: ~bc

2012-01-31T13:00:49+00:00

Hey, Anyone else out there have more resources on JavaScript in XHTML? I've been fumbling with this issue for like two months, and annoying the ZMan with my emails Why doesn't this work? Simply: when the valid xhtml page has no doctype, the JS works. When it has any sort of doctype, it doesn't. See for yourself: briandigital.com/test/menuwithoutdoc.html menuwithhalfdoc.html menuwithdoc.html Any ideas? For me (on Mac) it only renders *and* functions right in Opera5. A Windows using friend says it works on some of his browsers. Please email if you find the answer, and I'll come back and post anything that works (this isn't the best place to discuss debugging my site, I know). Sorry if my plea annoys anyone. I'm sure at least Jefffery's sick of me... ;-)

Posted by: RPW

2012-01-31T13:00:49+00:00

OK after some quick tests (and reading everyone else who's joined in the debate) the three XHTML 1.0 doctypes should read as: Stick to the exact capitalization above to allow your pages to validate.

Posted by: Dave H

2012-01-31T13:00:49+00:00

"now that we can render in a more compliant way, does anyone know when we can expect to see a strictly rendering browser?" This is where XHTML, especially XHTML 2.0, is headed. When a web page is sent with the XHTML media type (application/xhtml+xml rather than text/html) the user agent passes it through an XML parser, and throws an error message if it isn't well-formed XML. Mozilla 0.9.2, Netscape 6.1 and Opera 6 all support the XHTML media type (unfortunately Microsoft presently do not). Note that whilst they check for well-formedness, they don't compare the document to it's DTD the way Amaya does (ensuring the document is "type-valid"). Even so, it should go a long way to helping tidy up the messy tag soup that presently populates the web.

Posted by: jeffrey

2012-01-31T13:00:49+00:00

Ouch. I've lowercased "html" in those XHTML DOCTYPEs per your comments and the lowercase "html" in ALA's own XHTML DOCTYPE declaration. Several experts reviewed the article for accuracy before it went live. Nobody caught this error. Thanks for the essential input and a thousand apologies for the confusion.

Posted by: see

2012-01-31T13:00:49+00:00

does anyone has experience what exactly mozilla/n6 does different in its standard mode? i had a problem with a mainly table based layout in which mozilla seemed to use a line-height for table cells which contained a 1px high image only if a DOCTYPE was given (and do the cell break to became like 10-15px high). in quirks mode the cell stayed 1px high. mac ie seemed to do a similar thing.

Posted by: jeffrey

2012-01-31T13:00:49+00:00

for one thing, in standards mode, mozilla messes with table-based layouts until you add one or more additional css rules. this is discussed in detail in an earlier article, "better living through xhtml." the relevant portion of the article is linked below: http://www.alistapart.com/stories/betterliving/#browsers

Posted by: drew

2012-01-31T13:00:49+00:00

I hit the hotkey to enlarge the text on ALA, and only *some* of the text changed size. Sure enough, right there in your stylesheet, the body slass is defined with pixel-sized fonts. Come on guys, how about a little nod to taking your own advice.

Posted by: Dave H

2012-01-31T13:00:49+00:00

Also worth mentioning: in the present version of Mozilla, simply hit CTRL+I (or click View -> Page Info) to find out whether the page is being rendered in standards compliant mode or in backwards-compatibility mode. This feature will find it's way into the next major release of Netscape before too long (post Netscape 6.2x)...

Posted by: Blondinnet

2012-01-31T13:00:49+00:00

First of all, a very good article indead . I must apologize for my writing of english which is far then good. So , I have a problem when validating my page on the w3 validator but the same page validate well-formed XHTML 1.0 with the WDG validator, so what is wrong with ??? Any idea? The Doctype on my page : Document That's what the W3 validator gives back : Warning: DOCTYPE Override in effect! Any DOCTYPE Declaration in the document has been supressed and the DOCTYPE for «XHTML 1.0 Transitional» inserted instead. The document will not be Valid until you alter the source file to reflect this new DOCTYPE. Below are the results of checking this document for XML well-formedness and validity. What does that mean? I really don't know. Please note that you have chosen one or more options that alter the content of the document before validation, or have not provided enough information to accurately validate the document. Even if no errors are reported below, the document will not be valid until you manually make the changes we have performed automatically. Specifically, if you used some of the options that override a property of the document (e.g. the DOCTYPE or Character Encoding), you must make the same change to the source document or the server setup before it can be valid. You will also need to insert an appropriate DOCTYPE Declaration or Character Encoding (the "charset" parameter for the Content-Type HTTP header) if any of those are missing. No errors found! * This document would validate as the document type specified if you updated it to match the Options used. Is this a problem of language because I use "FR" instead of "EN", don't know? Can someone help me with that.

Posted by: Suzanne

2012-01-31T13:00:49+00:00

I have been having a problem with a table layout falling literally to pieces in Netscape 6 because of the lack of a DOCTYPE, then with a valid DOCTYPE. If I use the valid DOCTYPE, it falls apart. If I use the above DOCTYPE, it all goes together perfectly. I can't remember where I first heard this (I believe it was from a friend who possibly read it at evolt.org), however recent testing (two days ago) shows this is still the case for Netscape 6.2. Anyone know why?

Posted by: Josh

2012-01-31T13:00:49+00:00

http://pun.org/ seems to validate fine, but I have issues with some of my pages where I use URLs that have "&" characters in them. Is there a straightforward way of escaping those strings so they'll still be usable from 4.x browsers? --jrp

Posted by: Dave H

2012-01-31T13:00:49+00:00

Blondinnet -- I think the W3C validator failed to detect your character encoding because you missed out the element around your element. Try the following: Document

Document

Posted by: Dave H

2012-01-31T13:00:49+00:00

Correction to the above! You should have the PUBLIC identifier "-//W3C//DTD XHTML 1.0 Transitional//EN", and NOT "-//W3C//DTD XHTML 1.0 Transitional//FR"! (The EN refers to the language the DTD is written in, not the language your XHTML file is written in.)

Posted by: Dave H

2012-01-31T13:00:49+00:00

In order to encode an ampersand in a URL, for example "http://mysite/?foo=1&bar=2", you can either: 1) replace '&' with '&', i.e. 2) See if it works with a semicolon instead, i.e.