views:

2686

answers:

6

As the title describes, what are the different doctypes available and what do they mean? I notice that the layout looks a little different in IE7 when I switch from

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

Are there any others and what are the effects or ramifications?

Thanks!

+3  A: 

Here is the official explanation of the various DTD's from the W3C:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

You might also find the following beneficial:

http://www.freedivs.com/tutorials/Choosing%20a%20DOCTYPE/

Noah Goodrich
+28  A: 

A Doctype, or Document Type Declaration associates the document with a Document Type Definition.

The Document Type Definition is a standard for an XML document. There are many DTDs, for both XML and XHTML documents. XML itself doesn't have much of a schema or a very specific set of rules, apart from the requirement that everything be well-formed. You can think of a DTD as a more specific schema for the document.

Rendering Modes

Due to the standards movement, most modern browsers actually have different rendering modes (standards mode, for rendering your document and css according to more recent web standards, and quirks mode, wherein the browser brings back some rendering ideas from the early days of the web). These modes are instituted for purposes of backward-compatibility. The vast landscape of web pages which were created in the first era of the web are rendered according to the rules of their time, while newer documents can appeal to the new wave of standards. As time goes on and new formats are imagined, a corresponding DTD could potentially be created.

Browser Discrepancies

In an ideal world, a page that is being loaded by a browser would read the Doctype at the top and use it to look up a Document Type Definition. It would then use the schema of that DTD as the basis for reading the rest of the document. Doctypes, then, would be essential for validating markup documents. The DTD would provide the standard against which your document is to be validated.

Unfortunately, it's not an ideal world. Browsers don't necessarily behave consistently here, and if they do, the consistent behavior isn't quite in line with the original vision for Doctypes. Although parsing is done independently of the Doctype, major browsers will at least examine the Doctype to determine the rendering mode. If your Doctype is absent or is incomplete, the browser will likely be rendering in quirks mode. For well-written, modern documents to appear correctly, the browser should be rendering in standards mode. Mozilla, Safari, and some recent versions of Opera actually implement an Almost Standards mode, which is dedicated entirely to transitional pages.

When you change the Doctype and notice changes in the way a page is displayed, it is because the browser may be applying a slightly different set of rules when it tries to parse the document. As a consequence, the resulting page may be a little bit different, depending on whether all of its parts conform to the DTD, or at least, depending on the browser, that your data validates within the rendering mode that the doctype suggests.

Choosing a Doctype

In pursuit of standards-compliance, strict Doctypes should be used whenever possible.

When writing in XHTML, this Doctype is common:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

When writing in HTML 4.1, this one is common instead:

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

Some other common doctypes for XHTML and HTML 4 are listed here, for completeness:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;

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

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

Debate on Strict versus Transitional Doctypes

Standards evangelists have called for web developers to stop using the Transitional Doctype on new pages and instead use Strict. Again, this is a case where the theory and the practice have some difficulties being reconciled. The original hope of the transitional Doctype was to provide a halfway house for transitioning legacy websites toward standards-compliance. With transitional doctypes, the restriction on elements and attributes is literally "less strict", so developers would be able to get their work running under standards mode sooner, and phase out the outstanding differences over time.

Controversy exists because it isn't always quite so simple for a developer change the Doctype in an enterprise environment. Freelance developers and makers of small- or medium- sized websites may often have an easier time determining their Doctype and making this transition. In an enterprise production environment for a highly-demanded web-based service, there are inherently more complicated dependencies on legacy systems and 3rd party code products, which themselves may be on a roadmap for removal or redesign, but the execution of such changes must be done methodically and incrementally.

Helpful Tools

The W3C (World Wide Web Consortium) is a group which plays an active role in defining these kinds of standards. They maintain a helpful online tool at http://validator.w3.org/ for verifying and validating documents against their standards. There are many other 3rd party tools and browser extensions with similar functionality.

keparo
+5  A: 

Browsers don't care what doctype you use (well, almost true), they use it for one thing and one thing only: to decide which render mode to use. See e.g. the Fx or Opera documentation for real-world examples on what algorithms is used to decide which mode to use (I guess there is some documentation for IE buried somewhere in MSDN too ... This may be the correct page, I don't know, sorry).

There are however two major modes in most browsers (some browsers have an almost standards mode too):

  • quirks mode (used when no "correct" doctype is found, "correct" from the browsers point of view): try to render the document as some old version of IE would do (one of the most important differences, i.e. affects rendering the most, is that some browsers exploits the IE box model bug in this mode),
  • and standard mode (used when the browser found a doctype it considers correct): try to do as the standards says.

You can use (the non-standard) document.compatMode property in previous mentioned browsers to check which mode that was used to render the current document.

(Note on XHTML: I assumed that you serve you documents as HTML (text/html), if you serve you document as XHTML (probably application/xhtml+xml) most browser jumps into standard mode directly and don't care about the doctype at all AFAIK.)

BTW: the recommendation (or, what looked like a recommendation) in the other answer is broken, the transitional DTD should not be used on new documents. Always use strict (the term "strict" is kind of misleading, should be "default" or something else non-scary), period:

Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required. -- HTML 4.01: 22 Transitional Document Type Definition.

We recommend that authors write documents that conform to the strict DTD rather than the other DTDs defined by this specification. -- HTML 4.01: 4 Conformance: requirements and recommendations

And there are many blog post about this, e.g. no more Transitional DOCTYPEs, please (from 2006, but some, obviously, still have problems with this :).

This post started out with pointing out that browsers don't care what you choose, and then developed into a rant about how to choose the correct DTD, interesting ... But if you are going to spend(/waste?) time and energy to choose a DTD you might as well choose the correct one (from a HTML 4.01 standard perspective that is).

Or, you can ignore all this and use the following instead, soon anyway:

<!doctype html>

(This answer to "any reason not to start using the HTML 5 doctype?" was kind of related to the last part.)

cic
For development (read: correctness test through validation), doctypes *do* play a role. After that, what you said applies.
Konrad Rudolph
A: 

Basically, the doctype determines how crazy IE is going to be.

If you don't set it to XHTML, or "strict" you'll be living in a world of hurt when it comes to IE (even if you set it, you'll still be hating on IE, but it does make it a lot better).

dicroce
If you need to target IE 6 or 7, you'll only be able to get almost standards mode anyway
Casebash
A: 

There is a lot of misinformation around doctypes. The confusion stems from the fact that doctypes originally was intended for one purpose (to identify the DTD, ie. the HTML version used), but in real-world browsers are used for a completely unrelated purpose.

Doctype declarations are only used for one thing in todays browsers, that is switching between quirks rendering mode and standards rendering mode for CSS. So basically it is a CSS-thing, not a HTML-thing.

Quirks mode rendering is backwards compatible with some old rendering bugs in older browsers, and is mostly useful for legacy content you dont want to fix. New content should always use standards mode, since it renders more correct and consistently among browsers. (There is still rendering differences between browsers when using standards mode, but there are much worse in quirks mode.)

It does not make any difference whether you choose a HTML or XHTML docytype, neither will it make any difference if you choose strict or transitional doctype. The rendering mode is basically selected like this:

  • If the document don't have any doctype, quirks mode is selected.
  • If the document have an unrecognized doctype, standards mode is selected. This means you can write a random doctype like <!DOCTYPE Chris> and it will work perfectly fine.
  • Official W3C doctypes without the correct url (the second string in the tag) selects quirks mode. All other doctypes selects standards mode. (Edit: of course it is more complex than that, and it even differs between browsers which of the recognized doctypes triggers quirks mode. Se hsivonens overview, linked from another answer.)

Historically doctypes were intended to declare which version and subset of HTML were used. HTML4 defines several versions, where "transitional" allows a number of elements ans attributes that (like FONT) is not allowed in "strict". A browser could theoretically process "strict" documents different than "transitional"-document. However no browser actually does this.

Edit: scunliffe points out that IE8 will have yet another rendering mode, "IE8 standards" mode. However AFAIK this mode is not triggered by a doctype but by a meta-tag.

JacquesB
No it is not just a CSS thing. Browsers behave differently when accessing the DOM in different modes too (or at least IE does), worse yet in IE8, there are 3 separate modes, quirks, standards, and IE8 standards mode.
scunliffe