View Poll Results: Which doctype do you most often use?

20. You may not vote on this poll
  • No doctype baby! Quirks mode? BRING IT ON!!

    1 5.00%
  • That partial doctype my HTML editor gives me.

    2 10.00%
  • HTML 4.01 Transitional

    2 10.00%
  • HTML 4.01 Strict

    6 30.00%
  • XHTML 1.0 Transitional

    5 25.00%
  • XHTML 1.0 Strict

    2 10.00%
  • I don't care. I'm going to lunch.

    2 10.00%
Results 1 to 13 of 13

Thread: Once And For All: About DOCTYPES

Threaded View

  1. #1
    Join Date
    Feb 2003
    Michigan, USA

    Once And For All: About DOCTYPES

    Lately I've noticed many forum members recommending strict doctypes because they work better than transitional doctypes. People also reply back that they use a strict or transitional doctype and paste that tag in their post, only to find out it is incomplete.

    It's time to set the record straight.

    A doctype tag, DTD or Document Type Declaration, however you want to call it, has three parts: 1) The tag keyword; 2) The document type; 3) And the URL to the actual .dtd file that defines that flavor of HTML or XHTML.
    HTML Code:

    <!DOCTYPE — The tag keyword tells the browser this is a document type declaration.

    HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" — The flavor of HTML or XHTML and what language it's written in. This one happens to be HTML 4.01 Strict, which is written in English.

    "http://www.w3.org/TR/html4/strict.dtd" — The URL to the .dtd file that declares the Strict HTML 4.01 flavor. Try it in your Web browser. All .dtd files are plain text.

    This is NOT a correct DOCTYPE:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    I'll explain more in a moment why it's not correct and what happens to Web browsers when you include a partial DOCTYPE tag, or exclude one all together.

    The Standard About Browser Quirks
    During the Dark Ages of the World Wide Web (circa 1998), no Web browser technology in its then current implementation was based on any standard. Standards existed as we know them today, but many of the important ones had only been finalized for about a year. Web browsers were a nightmare to code for. You coded once for Netscape Communicator and AGAIN for Internet Explorer. Each browser had its quirks when rendering a page.

    Since the release of Internet Explorer 5 for the Mac OS and 6.0 for Windows, the MSIE browser has had two page rendering modes. Netscape too followed suit upon version 6.0 and newer. Opera 6 and newer did the same. Safari from the start had two rendering modes too.

    Quirks Mode
    This rendering mode is used when one of two things is or isn't in your HTML file: A partial doctype, like the second doctype example above, or no doctype at all. This mode often reverts the browser's understanding of HTML, JavaScript and CSS back to the pre-Web standards era. Your code is at the mercy of browser developers who were trying to out do each other and get Web designers to code for their particular browser. The resulting pages are sometimes messy. This mode is used when most sites are rendered in your browser.

    Quasi-Standards Mode
    I believe Gecko-based browsers (Netscape 6+, Mozilla, Firebird, Firefox, and many others), Opera and Safari go into quasi-standards mode when you include a partial doctype, like the one below.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    This retains many of the quirks of older browsers — being able to do a LOT of error correction for sloppily written HTML and CSS. Internet Explorer doesn't have a quasi-standards mode. This is a fairly new rendering mode that's only been available for two or three years.

    Standards Mode
    Include a full, complete doctype and modern browsers go into Standards mode. Here they more tightly adhere to the HTML and CSS standards set up by the World Wide Web Consortium (of which Microsoft is, and has been a very active member).

    Internet Explorer and <!DOCTYPE> tags
    The black sheep of Web browsers often seems to be Internet Explorer. It only looks for "<!DOCTYPE" appearing before the <html> tag, and in so doing puts the browser in Standards Mode. And the screwy thing is, the partial doctype tag I listed above puts IE-Win into quirks mode, but replacing the partial doctype with <!DOCTYPE> puts it back into standards mode!

    That said, in XHTML you can include the <xml> prolog before the doctype. Beware that Internet Explorer will go into quirks mode if the XML prolog is included {1}. This is supposed to be fixed in Internet Explorer 7 {2}.

    The Bottom Line About DOCTYPE Tags: Either use a full, proper one (which I will list below) or don't use one at all.

    Full Doctype Tags

    HTML 4.01 Transitional (or Loose)
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    HTML 4.01 Strict
    HTML Code:
    HTML 4.01 Frameset
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    XHTML 1.0 Transitional
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    XHTML 1.0 Strict
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    XHTML 1.0 Frameset
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    Strict Versus Transitional Doctypes
    This has been an often talked about area of HTML in the forums. People say strict doctypes are better and that browsers render pages better when using a strict doctype. Transitional is crap.

    That's bull st. There are only very minor differences.

    When a browser renders a page "better" with a strict doctype, it's probably due to the browser ignoring presentational HTML attributes, or sometimes tags, that could be conflicting with your CSS declarations. Other times it's trying to predict how a designer expects the browser to react (noticable with gaps appearing and disappearing under images).

    To a browser, HTML is HTML. CSS is CSS. The different flavors of HTML only determine which HTML tags and attributes are recognized. When in Standards Mode, Cascading Style Sheets are supported to the best of that browser's capability. Strict and transitional doctypes do not change a browser's support for CSS. However, there can be minor variations in the default look of HTML tags.

    When some of the long-standing forum members say a strict doctype is better, they are speaking about Web accessibility. Strict doctypes get rid of all presentational HTML tags and attributes, expecting you to move that information to style sheets. In doing so, you can create a page of meaningful HTML with minimal mess. The style sheets do all the visual formatting. Your data and the presentation of that data is separate. That alone makes it more accessible to people with disabilities and non desktop computer Web browsers. That alone makes strict doctypes "better" than transitional doctypes.

    This thread is up for discussion, but please back things up with facts and examples. I've attached a ZIP file containing several HTML files with varying doctypes so you can see how browsers react to them.

    In the examples I've attached, you'll see one minor difference with a gap disappearing and reappearing under the image (Images, Tables, and Mysterious Gaps). Opera seems to try rendering a page in full standards mode if it doesn't recognize the doctype.

    The bottom line here is that there are a few minor differences to the default look of HTML tags, but you can't count on those differences always being there. If something is happening that you think shouldn't happen, it's most likely a misunderstanding of how the Standards work. Developing a site with a Strict doctype is better because you move all presenational information out of the HTML file, not because strict doctypes render better.

    Further reading: Fix Your Site With The Right DOCTYPE!

    Updates and Edits

    1. Felgall mentioned that the XML prolog bumps IE-Win into quirks mode in his first post on this thread.

    2. Kravvitz, later in this thread, pointed out that the XML prolog bumping IE-Win into quirks mode should be fixed in Internet Explorer 7.
    Last edited by toicontien; 03-30-2006 at 12:27 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.14480 seconds
  • Memory Usage 3,611KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (9)bbcode_html
  • (4)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (13)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)pollresult
  • (1)pollresults_table
  • (13)postbit
  • (13)postbit_onlinestatus
  • (13)postbit_wrapper
  • (1)showthread_list
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (27):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./includes/functions_threadedmode.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (76):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • showthread_poll_start
  • showthread_polloption
  • showthread_poll_complete
  • showthread_post_start
  • showthread_query_postids_threaded
  • showthread_threaded_construct_link
  • showthread_query
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates