Everything You Need to Know About DTDs
One of the first things you need to know about making web pages is the importance & usage of the DTD (Document Type Definition).
Purpose
DTD's are vitally important to your webpages:
- Required at the beginning of every HTML document
- Tells web browsers & validators which version of HTML to use
- Extremely important today as browsers need to adhere to standards
Types
There are many different DTDs, as shown in the following table.
| Strict | Transitional | Frameset | |
|---|---|---|---|
| Meaning |
|
|
|
|
HTML 2
(1995) |
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
||
|
HTML 3.2
(1997) |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
|
||
|
HTML 4.01
(1999) |
<!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
(2000) |
<!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
(2001) |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||
|
HTML5
(2011?) |
<!DOCTYPE html>
|
Quirks Mode
If you
- don't use a DTD,
- or you leave off the URL when using HTML 4.01 or XHTML 1.0
then browsers go into Quirks Mode: the browsers emulate odd behaviors dating back 10 or more years. You do not want your webpages to be rendered in Quirks Mode!
Internet Explorer & Quirks Mode
It wouldn't be web development if you didn't have to make special considerations for Microsoft's IE.
Modes & META elements
IE 6-7 on Windows has two modes:
- Quirks Mode: IE renders like legacy versions of IE (pre-6) & doesn't adhere to current Web standards.
- Standards Mode: IE tries to render pages in accordance with current standards (not that it does a great job, since it's adherence to standards is awful).
IE 6 & earlier has a bad bug: if there's anything in your document before the DTD, IE switches to Quirks Mode. As you'll learn later, sometimes (with XHTML) you're supposed to start the document with an XML declaration: <?xml version="1.0" encoding="UTF-8"?>. Doing this switches IE 6 & below into Quirks Mode. What a mess.
IE 8 on Windows is far more complicated. There are many different compatibility modes, which you indicate with a META element inside your HEAD element:
-
IE 5 Mode
IE 8 tries to emulate IE7 quirks mode, which is similar to IE 5.
<meta http-equiv="X-UA-Compatible" content="IE=5" /> -
IE 7 Mode
IE 8 tries to emulate IE 7 standards mode, whether or not the page has a DTD (this is not good).
<meta http-equiv="X-UA-Compatible" content="IE=7" /> -
EmulateIE 7 Mode
IE 8 uses the DTD to decide whether to use IE 5 Mode or IE 7 Mode. Used by IE 8 by default for pages loaded from an Intranet or with embedded IE.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> -
IE 8 Mode
IE 8 renders pages in IE 8 standards mode.
<meta http-equiv="X-UA-Compatible" content="IE=8" /> -
EmulateIE8 Mode
IE 8 uses the DTD to decide whether to use IE5 Quirks Mode or IE 8 Standards Mode. Used by IE 8 by default for pages loaded from the Internet.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> -
IE Edge Mode
IE renders pages in the current browser's standards mode: IE 8, IE 9, IE 10, etc. Microsoft recommends using this only with test pages, since who knows what the future will bring, but to heck with 'em. Use this one in your webpages, after you're done testing how your webpage looks in IE 7 Compatibility Mode using the Compatibility View Button pictured below.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
The META element must appear before all other elements in the HEAD, except for the TITLE element & other META elements.
Compatibility View Button
A user can also click the Compatibility View Button on the IE 8 toolbar to emulate IE 7, shown in the figure below:
This button only appears if IE 8 determines that the page might not render properly in IE 8 Mode.
This button will not appear if you're using IE Edge Mode.
Compatibility View List
Microsoft publishes a Compatibility View List that tells IE 8 to automatically render certain sites on the list like IE 7. This list is updated through Windows Update, but only if the user manually chooses it (which is completely crazy).
Of course, IE is the only browser that adheres to all of this mishegoss.
What You Should Use
For most of our class, you should use this DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
However, when we practice creating HTML5 webpages, you should use this DTD:
<!DOCTYPE html>
Further Information
Gutfeldt, Matthias. "Doctype switching and standards compliance: An overview". Matthias Gutfeldt (2003). http://gutfeldt.ch/matthias/articles/doctypeswitch.html.
Quinn, Liam. "Choosing a DOCTYPE". Web Design Group (2005). http://www.htmlhelp.com/tools/validator/doctype.html.
Microsoft. "META Tags and Locking in Future Compatibility". MSDN (2010). http://msdn.microsoft.com/en-us/library/cc817574.aspx.
Microsoft. "Windows Internet Explorer 8 Compatibility View List". Microsoft Download Center (2010). http://www.microsoft.com/downloads/details.aspx?FamilyID=b885e621-91b7-432d-8175-a745b87d2588&displaylang=en.
Upsdell, Chuck. "Resources > DOCTYPEs". Browser News (2010). http://www.upsdell.com/BrowserNews/res_doctype.htm.
Wikipedia. "Document Type Definition". Wikipedia (2010). http://en.wikipedia.org/wiki/Document_Type_Definition.
Zeldman, Jeffrey. "Fix Your Site With the Right DOCTYPE!". A List Apart (2002). http://www.alistapart.com/articles/doctype/.
