The doctype is the very first line of any HTML document. But do you know which one to use in an email and why ? Here’s my attempt to explain everything you need to know about doctypes in HTML emails.

What’s a doctype?

In the (not so) early days of the web, at a time where IE 4 and Netscape 4 were thriving, CSS was far from being equally supported in these browsers. And on top of that, CSS standards were far from being respected by these browsers. So web developers had to code in non standards ways in order to get their code to work.

This caused a problem when browser vendors found interest in respecting standards. This could have suddenly caused millions of pages coded in non standard ways to break. Browsers needed a way to respect standards for new pages without breaking old pages.

Enters the doctype. This declaration allows developers to say they’re coding with standards in mind. Thus, browsers were able to trigger the correct behavior whether you had a doctype or not.

Without a doctype, you get into what’s called “Quirks Mode”. And with a doctype, you are in “Standards Mode” (or sometimes called “Strict Mode”). This still applies nowadays, even in modern browsers. And it’s important to have this in mind, because there are huge differences between the two.

Quirks Mode and Standards Mode

For example, in quirks mode, CSS class and id names are case insensitive. The three following CSS selectors are equivalent in quirks mode, but not in standards mode.

.foo { background:blue; }

.Foo { background:white; }

.foO { background:red; }

(“C’est fou !”, as we’d say in French.)

Another thing that I love in quirks mode is that unitless numbers in CSS are interpreted as pixels. So once again, the following code works in quirks mode, but not in standards mode.

.bar { width:500; }

Mozilla has a huge list of differences between quirks mode and standards mode in Gecko, Firefox and Thunderbird’s rendering engine. But other rendering engines have other differences of their own.

For example, in WebKit (the rendering engine used in Safari and throughout all of iOS’s web views), you can’t apply display:block to <td> s. I mean, you can. But nothing will happen.

<td style="display:block;"></td>

However, this works if you use a <th> instead of a <td> . This is why email developers sometimes have to use <th> even though they make no semantic sense (see “td or not td?” by Mike Ragan). (Always use role="presentation" on your <table> to prevent screen readers from making your code confusing.)

So it is important to have a doctype in order to trigger the correct standards mode. But the question remains: which one should we use?

From HTML4 to HTML5

Over the years, doctypes have evolved with the different specifications of HTML. Here’s an early HTML4 strict doctype for example:

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

Here’s the XHTML1 transitional doctype:

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

That’s a big one. There’s a legend that says that a developer was once able to write this entirely by hand, without copy and paste. Thankfully, here’s the latest HTML5 doctype:

<!DOCTYPE html>

It’s shorter, cleaner, and it’s easier to memorize. That’s because standards authors realized browsers didn’t really pay attention to the rest of previous doctypes. The <!DOCTYPE html> part was enough to trigger standards mode in all browsers.