Everything You Need to Know About DTDs

On this page…

    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:

    Types

    There are many different DTDs, as shown in the following table.

      Strict Transitional Frameset
    Meaning
    • Emphasize structure over presentation
    • No deprecated elements or attributes
    • No frames
    • No link targets
    • Mix structure & presentation
    • Allows deprecated elements & attributes
    • Allows frames
    • Allows link targets
    • Used for pages that contain frames
    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
    (2014?)
    <!DOCTYPE html>    

    Quirks Mode

    If you

    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:

    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:

    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:

    IE 8 Compatibility Button

    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 first manually chooses to install it (which is completely crazy).

    Of course, IE is the only browser that adheres to all of this mishegoss.

    What You Should Use

    For the first few meetings of our class, we're goin' old school, so you should use HTML 4.01 Transitional DTD:

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

    Then we’re going to move forward just a bit, so you can use the HTML 4.01 Strict DTD:

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

    However, we'll finally enter the modern era, & then you should use this DTD in class & going forward:

    <!DOCTYPE html>
    

    Why use this DTD? Or, to put it another way, why did the writers of the HTML5 spec choose this particular DTD (& another for legacy systems that looks like this: <!DOCTYPE html SYSTEM "about:legacy-compat">)? Here's their answer:

    [T]hey meet the following criteria:

    • They trigger standards mode in all current and all relevant legacy browsers [in other words, older browsers won't choke on it].
    • They are well-formed in XML and can appear in XHTML documents.
    • It is possible to output at least one of the alternatives, if not both, with extant markup generators.
    • They intentionally contain no language version identifier so the DOCTYPE will remain usable for all future revisions of HTML.
    • The first is short and memorable to encourage its use.
    • The legacy-compat DOCTYPE is intentionally unattractive and self descriptive of purpose to discourage unnecessary use.

    You can see a nice table showing the various browsers' support for the HTML5 DTD at Activating Browser Modes with Doctype.

    The W3C has this additional point to make about the HTML5 DTD (note: I added the link):

    As HTML5 is no longer formally based upon SGML, the DOCTYPE no longer serves this purpose, and thus no longer needs to refer to a DTD. However, due to legacy constraints, it has gained another very important purpose: triggering no-quirks mode in browsers.

    HTML 5 defines three modes: quirks mode, limited quirks mode and no quirks mode, of which only the latter is considered conforming to use. The reason for this is due to backwards compatibility. The important thing to understand is that there are some differences in the way documents are visually rendered in each of the modes; and to ensure the most standards compliant rendering, it is important to ensure no-quirks mode is used.

    Further Information

    Gutfeldt, Matthias. "Doctype switching and standards compliance: An overview". Matthias Gutfeldt (2003). http://gutfeldt.ch/matthias/articles/doctypeswitch.html.

    Hunt, Lachlan. "HTML 5 Reference: A Web Developer’s Guide to HTML 5". W3C (2009). http://dev.w3.org/html5/html-author.

    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.

    Quinn, Liam. "Choosing a DOCTYPE". Web Design Group (2005). http://www.htmlhelp.com/tools/validator/doctype.html.

    Sivonen, Henri. "Activating Browser Modes with Doctype". Henri Sivonen’s pages (2010). http://hsivonen.iki.fi/doctype.

    Upsdell, Chuck. "Resources > DOCTYPEs". Browser News (2010). http://www.upsdell.com/BrowserNews/res_doctype.htm.

    WHATWG Wiki Contributors. "FAQ". WHATWG Wiki (2012). http://wiki.whatwg.org/wiki/FAQ.

    Wikipedia. "Document Type Definition". Wikipedia (2010). http://en.wikipedia.org/wiki/Document_Type_Definition.

    Wikipedia. "Standard Generalized Markup Language". Wikipedia (2012). http://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language.

    Zeldman, Jeffrey. "Fix Your Site With the Right DOCTYPE!". A List Apart (2002). http://www.alistapart.com/articles/doctype/.

    WebSanity Top Secret