Choosing a Valid DOCTYPE - arguments.callee

When building a website, it's important to add a DOCTYPE declaration at the very top of your HTML or XHTML source code. In most cases, putting anything at all before the DOCTYPE (even whitespace!) will result in some browsers falling back to "quirks mode", causing your site to render improperly. Spelling and capitalization both matter, so often the easiest thing to do is copy and paste the particular DOCTYPE you want. But how do you know which to choose?

HTML vs XHTML

The current HTML standard is HTML 4.01, while XHTML authors might choose either XHTML 1.0 or XHTML 1.1. The most commonly quoted reason for using XHTML is that it enforces good coding practices such as proper nesting, consistent capitalization and quoting, etc. Don't listen to that crap; if you develop good HTML habits, you'll do all of that anyway. The differences are outlined at W3.org, but the main differences include capitalization of elements and attributes, and empty tag style:

    <!-- Empty tags in HTML -->
    <p></p>
    <br><br>
    <img src="/img.png">

    <!-- Empty tags in XHTML -->
    <p />
    <br /><br />
    <img src="/img.png" />

Strict vs Transitional

If you are concerned about cross-browser compatibility, I strongly suggest you use a strict DOCTYPE. Relying on transitional DOCTYPEs may require revision as deprecated features become obsolete features in newer browsers. Relying on "quirks mode" usually requires you to do more work such as adding IE hacks to your HTML and CSS via conditional comments.

DOCTYPEs

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

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

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

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

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

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

Unless you are serving application/xhtml+xml to a known set of visitors (the average internet wanderer's browser cannot necessarily understand application/xhtml+xml), I suggest using either HTML 4.01 Strict or XHTML 1.0 Strict.

Update: HTML5

HTML5 has its own DOCTYPE, and interestingly enough it may be a good choice for standards-loving developers, even those who are not yet using any HTML5-specific content. It looks like this:

<!DOCTYPE html>

Short and sweet. What's great about this is that all DOCTYPE-sniffing browsers (including Firefox, Safari, Opera, and even IE5/6/7/8) will render in Standards Mode regardless of whether or not they support HTML5. If you're already using a strict HTML or strict XHTML DOCTYPE to induce Standards Mode in your visitors' browsers, you can switch to the above DOCTYPE whether or not you plan to incorporate HTML5 in your website.

Tags

html