Rendering Mode and Doctype Switching

By: Holly Bergevin

Page 2 of 2

Set for printing

Previous

Which doctype to use?

To be sure to trigger "standards" mode (or "almost standard" mode) there are several doctypes that can be used. They are:

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


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


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


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


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


XHTML 1.0 Frameset:
<!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">

Each of these doctypes is meant for a certain kind of page. See the support links at the bottom of the page to view relevant W3C information. (The above doctypes are split over 3 lines to keep them from wrapping in odd places, if possible. In practice, I prefer them on just two lines as in the earlier single example. ~hb)

Things to keep in mind

The Transitional and Frameset doctypes above will put Mozilla 1.1 and later Mozilla browsers into "almost standard" mode.

If any of the above doctypes are written on a single code line, be sure there is a space between the "start/public identifier" and the "system identifier". That space (or a line break) is required. Also, the doctype must appear on the first line of the document, and at the start of that line, unless there is an xml declaration, which then comes on the first line.

With xhtml being used as a "bridge" between HTML and xml, many authors are tempted to use the xml declaration at the beginning of their xhtml documents. However, since most of these pages are being served as text/html, the declaration is not necessary and the character encoding that it usually includes can be placed in a <meta /> tag such as the following example.

Meta tag for an xhtml document with the character encoding of UTF-8:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Caution!

Internet Explorer has an unfortunate bug involving the xml declaration. If there is anything on the first line before the doctype, IE6 will switch into "quirks" mode. This means that using an xml declaration (<?xml version="1.0" encoding="UTF-8"?>) will cause the behavior. An HTML comment, even an empty one, will do the same.

If one happens to be using a box model hack to correct for IE5.x/win (see The Box Model Problem article at CMX), and if for any reason IE6 is in "quirks" mode, IE6 will need the box width value meant for IE5.x/win. But, it will not be fooled by the hack and as a result, it will draw the box too small. To use the Box Model hack, IE6 needs to be kept in "standards" mode.

If the xml declaration must be used, the Tan hack may be modified to allow this without messing up IE6. See The Box Model Problem article at CMX for details.

Conclusion

An author should be aware of the "Doctype Switch" and various rendering modes in order to make sure that his or her pages are displayed as closely as possible to the way they are envisioned. Using a doctype that allows a browser to render in "standards" mode will go a long way toward making web pages look the same in different browsers.

The following links provide reference material as mentioned in the above article.

Rendering Mode and Doctype Switching: Resource and Support links

Page 2 of 2 Previous 1 2


download
Download Support Files


Downloads are disabled during your trial period.


Keywords
Rendering Mode, Doctype Switch, "Standards" mode, "Quirks" mode, doctype, xml declaration, XHTML, HTML, CSS, cross-browser, cross browser