What are the different doctypes in html and what do they mean?

html xhtml doctype

25,646

Solution 1

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

The Document Type Definition is a standard for a specific XML or SGML document. XML and SGML themselves doesn't have much of a schema or a very specific set of rules aside from how tags and attributes work in general. You can think of a DTD a description of the rules for a particular kind of document (like HTML, SVG or MathML). They say what tags are allowed where (e.g. that an html element must contain exactly one head element followed by exactly one body element).

There are alternatives to DTDs such as XML Schemas that are more commonly used today.

Browsers, however, do not use DTDs at all. They read the Doctype to determine the rendering mode, but the rules for parsing the document are entirely baked into the browser.

This is why HTML 5 has a Doctype (to determine the rendering mode) but not DTD.

Rendering Modes

Early web browsers were very buggy. When new versions were released they had to maintain compatibility with their predecessors and rivals. This made it very hard to fix bugs because websites were built that depended on them.

To resolve this, modern browsers have different rendering modes (standards mode, for rendering your document and css according to standards, and quirks mode, wherein the browser emulates the bugs of earlier browsers, and almost standards mode which sits between the two).

Choosing a Doctype

There are two factors to consider when selecting a Doctype:

Does it trigger standards mode? (For new pages it should, times when you need to be compatible with browsers which don't support standards mode are very rare today).
Does it support the features I need?

Generally this means you should use HTML 5. It is the current standard and best reflects how browsers actually work:

<!DOCTYPE html>

Failing that. Strict doctypes avoid most features that should be handled with CSS.

When writing in XHTML 1.0, this Doctype is common:

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

More obsolete features are available via:

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

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

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

With the obsolete features being in

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

and

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

Note that most of the above have variations (e.g. you can omit the URL and rely on the public identifier) which have implications for the support of standards mode. This article includes an extensive list.

Debate on Strict versus Transitional Doctypes

(Note that the following is much, must less true in 2021 than it was in 2008)

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.

Solution 2

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](http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx), 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.)

Solution 3

I've written an article that explains how doctypes are involved in rendering mode selection.

Solution 4

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/

Solution 5

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.

View more solutions

25,646

Author by

Chris Conway

developer looking to get better at what I do

Updated on February 27, 2021

Comments

Chris Conway about 3 years
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">
```
Are there any others and what are the effects or ramifications?

Thanks!
Konrad Rudolph over 15 years

For development (read: correctness test through validation), doctypes do play a role. After that, what you said applies.
scunliffe over 15 years

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.
Casebash almost 14 years

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