Welcome to WebmasterWorld Guest from 54.83.93.85

Forum Moderators: open

Message Too Old, No Replies

FAQ: Choosing the best doctype for your site

     
9:18 pm on Aug 26, 2006 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
posts:9074
votes: 6


FAQ: Choosing the best doctype for your site

The question about which doctype is the best often comes up in the forums. This post is a short and simple guide to choosing the right doctype for your pages.

The three doctypes recommended below are all suitable for general-purpose use - they cover the vast majority of scenarios you will encounter when designing a website. Edge cases such as markup for specific devices are not covered.

The recommended doctypes are all for the latest version of HTML: HTML 4.01 [w3.org]. You should never be using a doctype which refers to an older version of HTML (like 4.0 or 3.2). XHTML is not covered here for simplicity - and there is rarely a need to use XHTML on the web today. (See also the recent thread Why most of us should NOT use XHTML [webmasterworld.com] for more information on the HTML vs. XHTML debate.)

Important note: the doctype should always be placed on the very first line of the document, with no comments, white space or XML prolog preceding it. This is so that Internet Explorer 6 can select the correct rendering mode.

Option 1: HTML 4.01 Transitional (full version)

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

The above doctype is the best choice when:

  • You are building new pages and you are unsure what doctype to choose
  • You are using a tables-based layout or are placing images in tables
  • You want to use older (presentational) markup
  • You want to open links in new windows

    The "full" version of the HTML 4.01 Transitional doctype is the best all-rounder - it triggers Standards Compliance Mode in modern browsers ("Almost Standards Mode" in Firefox), it contains all the necessary elements and attributes including deprecated (older) features. If at all unsure, choose this doctype!

    Option 2: HTML 4.01 Transitional ("half" version)

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

    This doctype is different from the "full" version above in that the URL for the DTD is missing. This means that the page will be rendered in Quirks Mode in modern browsers. Quirks Mode means that the browser handles the markup in a compatible way with older browsers such as IE5 or Netscape 4.

    The "half" doctype is the best choice when:

  • You have an existing tables-based layout that you are trying to validate
  • Using a newer doctype breaks the page design, and you do not want to rewrite the page
  • Your tables-based layout needs to work in very old browsers (IE3/5, Netscape 3/4...)

    You should never use the "half" doctype when using CSS for layout, as the browser will not handle the the layout according to the established specifications. This will cause a lot of cross-browser headaches. Using the wrong doctype is an extremely common reason why CSS-positioned layouts fail. The "half" doctype is good for converting older pages when you don't want to recreate the whole thing - but for new pages, it is best to use the "full" version or HTML 4.01 Strict.

    If you have older pages but you don't want to clean them up or make them pass validation, then there is no advantage in adding any doctype at all. When a browser encounters a page without a doctype, it automatically selects Quirks Mode and handles the page like an older browser. So if you have legacy pages without a doctype, don't worry about it until you want to rework those pages - they will continue to function as before for the foreseeable future!

    Option 3: HTML 4.01 Strict

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

    HTML 4.01 Strict is the recommended choice when:

  • You are using CSS for layout and presentation
  • You want to improve the accessibility of your page
  • You are catering for modern browsers (including IE6)
  • You want your page to work in alternative devices (mobile phones, consoles)
  • You want to improve your content-to-code ratio
  • You don't need presentational HTML

    HTML 4.01 Strict triggers full Standards Compliance Mode in all modern browsers including Firefox, IE6, IE7, Opera, Konqueror, Safari... It is the ideal long-term choice when writing new pages with clean, compliant markup, combined with CSS for positioning and presentation. HTML 4.01 Strict does not include older presentational HTML such as
    font
    elements: they will still work, but the page won't validate.

    Validation

    There are two reasons for adding a doctype: the first is to trigger the correct browser rendering mode for your pages. The second is to allow you to check your page for errors. You should always try to validate your basic templates for HTML compliance. Markup errors can cause display errors, and can affect the spidering of your site by search engines.

  • W3 HTML validator [validator.w3.org]
  • WDG HTML validator [htmlhelp.com]
  • W3 CSS validator [jigsaw.w3.org]

    References

    The references below offer further discussion of doctypes and doctype switching if you want to go into more detail:

  • Activating the Right Layout Mode Using the Doctype Declaration [hsivonen.iki.fi] (Henri Sivonen)
  • Choosing a DOCTYPE [diveintoaccessibility.org] (Dive Into Accessibility)
  • Mozilla's Quirks Mode [developer.mozilla.org] (mozilla.org)
  • Quirks Mode vs. Standards Mode - overview [webmasterworld.com] (WebmasterWorld)

    [edited by: tedster at 9:53 pm (utc) on Jul 5, 2010]
    [edit reason] fix formatting [/edit]

  • 10:13 am on Aug 27, 2006 (gmt 0)

    Senior Member

    WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

    joined:July 3, 2002
    posts:18903
    votes: 0


    Good post - and nice to see HTML 4.01 covered.

    I also find little need to go to XHTML. I am sticking with HTML 4.01 for the forseeable future.

     

    Join The Conversation

    Moderators and Top Contributors

    Hot Threads This Week

    Featured Threads

    Free SEO Tools

    Hire Expert Members