Once And For All: About DOCTYPES

toicontien · #1 03-23-2006, 09:57 AM

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 HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">

Reference

<!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"
                "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Strict

HTML Code:

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

HTML 4.01 Frameset

HTML Code:

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

XHTML 1.0 Transitional

HTML Code:

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

XHTML 1.0 Strict

HTML Code:

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

XHTML 1.0 Frameset

HTML Code:

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

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 s

t. 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.

HoboBen · #2 03-23-2006, 11:55 AM

Thank you for this, I'm bookmarking the page because i often have to explain this to people.

Robert Wellock · #3 03-23-2006, 01:16 PM

"XHTML Basic 1.0" I use the most over 200+ live pages second 1.1 and third Transitional I don’t use 1.0 Strict.

felgall · #4 03-23-2006, 01:53 PM

The stupidest part is that if you are using XHTML and include the XML header in front of the doctype where it belongs then it throws IE into quirks mode regardless of the doctype used.

toicontien · #5 03-23-2006, 05:20 PM

Ah yes. I forgot that. I'll add that in my first post on this thread.

Kravvitz · #6 03-24-2006, 04:16 PM

Quote:

Originally Posted by felgall

The stupidest part is that if you are using XHTML and include the XML header in front of the doctype where it belongs then it throws IE into quirks mode regardless of the doctype used.

That bug only seems to be present in IE6. Apparently that bug will be fixed in IE7.

Quote:

Originally Posted by Robert Wellock

"XHTML Basic 1.0" I use the most over 200+ live pages second 1.1 and third Transitional I don’t use 1.0 Strict.

XHTML 1.0 vs XHTML 1.1

Sending XHTML as text/html Considered Harmful
Serving up XHTML with the correct MIME type
http://www.w3.org/2003/01/xhtml-mimetype/
http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html
http://www.w3.org/TR/xhtml-media-types/#summary
Content-Typing XHTML

the tree · #7 03-25-2006, 08:14 AM

This should be stickified.

Robert Wellock · #8 03-30-2006, 10:59 AM

No, because nobody ever reads them. (You still get people asking how do I stop people viewing my code or downloading my images? Then Muppets going: "Yeah, I know a really great way that will stop this using X technique.").

<ot>Yes I know, I was involved in the SitePoint: XHTML 1.0 vs XHTML 1.1 discussion weeks before this one (November 2005). I already know that a certain major browser vendor cannot even get HTML 4.01 right so it's a weak argument for HTML 4.01.

That topic was designed for those who don't understand the MAIN difference between: 'W3C Notes' and 'W3C Recommendations' and how it ties with Appendix C. Notes are NOT intended to be a normative specification.</ot>

stacywacy · #9 03-30-2006, 11:19 AM

After doing my own research I switched all my websites over to XHTML, mostly transitional. I only have one website that I can validate as strict, and that's only because it's very simple. But, I have one website that uses a frameset doctype.
.

the tree · #10 03-30-2006, 11:28 AM

Quote:

Originally Posted by Robert Wellock

No, because nobody ever reads them. (You still get people asking how do I stop people viewing my code or downloading my images? Then Muppets going: "Yeah, I know a really great way that will stop this using X technique.").

You don't know that nobody ever reads them, just that not enough peole read them.

Quote:

Originally Posted by StacyWacy

After doing my own research I switched all my websites over to XHTML, mostly transitional.

I used to use xHTML 1.0 for a while until I realised there wasn't really a good reason to so I went to HTML 4.01 strict which does everything that xHTML 1.0 can do, and nearly everything that xHTML 1.1 can do.

toicontien · #11 03-30-2006, 11:32 AM

Most of the sites I create use XHTML 1 Transitional, but that's because the company I work for has a lot of client sites who are used to using presentational HTML attributes and tags for their newspaper sites. We went to all CSS layouts, but enabling clients to use legacy markup was essential.

If you have total control of the HTML, I don't see why you wouldn't want to use a strict doctype, but you also can specify a transitional doctype and not include presentational tags and attributes. In that way, transitional HTML is strict, because you choose not to use legacy tags and attributes.

Robert Wellock · #12 03-30-2006, 11:39 AM

Yes, I was being a little sardonic about 'nobody' and except of course HTML cannot do: Standalone Documents and XML extensibility. Other than that I can sit back and watch the fireworks… it all good repetitive fun.

felgall · #13 03-30-2006, 01:34 PM

There are arguments both for using HTML 4.01 and for using XHTML 1.0 depending on individual circumstances and what other uses if any that are to be made of the content of the page.

The choice between strict and transitional/loose depends on how your HTML, CSS, and Javascript are coded. Internet Explorer chooses between populating some document.documentElement or equivalent document.body fields bases on the DOCTYLE you use (other browsers just populate both places).

The important thing is that each web page contain a DOCTYPE that is consistent with the way the page is coded.

View Poll Results: Which doctype do you most often use?
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%
Voters: 20. You may not vote on this poll

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)