Home Resources Blog

Over the last few months, a couple of folks have asked us about which is the correct doctype to use in email. Finally, I decided to get into gear and find out for myself. Keeping in mind that some web clients strip out the doctype (if not head content) of your email, we found that there are subtle differences in how email clients render HTML emails with a variety of doctype declarations… Or no doctype at all. Read on to find out what we learned – or you can jump ahead to see what doctype we recommend you use.

Testing doctypes in HTML email

We decided to test three emails in this exercise – one with an XHTML 1.0 Transitional doctype, one with an HTML5 doctype and finally, an email with no doctype at all. Here’s a sample of the code we used:

XHTML 1.0 Transitional


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...

HTML5


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...

No doctype


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...

So far, so good. The email itself was very simple, with a variety of common CSS 2 & 3 techniques applied including margins and padding applied to table cells. That said, we left most elements as per their default settings. So, lets get on with the show.

The results

As mentioned, the difference a doctype can make is in most cases, quite subtle. However, this may help you debug down the line why, for example, you’re seeing more/less margin than expected in certain email clients. Here’s a summary of the differences we saw:

A doctype is required to display CSS3 in AOL Web

Yes, CSS3 in email lives, at least in a handful of email clients. In AOL Web, properties like border-radius and text-shadow only display if the XHTML or HTML5 doctype used:

Differences in AOL Web

If you’re going to use CSS3, XHTML 1.0 Transitional is the doctype for you (until HTML5 becomes standard, anyway).

No doctype, no paragraph margin

The main effect that having a doctype (or lack of) in email seems to be the amount of margin that’s added beneath <p> elements (tags). Here’s what this looks like in iPad Mail:

Margins in iPad Mail

Odd, hey? Here are email clients that we’ve observed this behavior in:

  • Gmail
  • MobileMe – No margin with HTML5 doctype only
  • Apple Mail – h1 also affected
  • iPad – h1 also affected
  • iPhone – h1 also affected
  • Symbian S60

By default, <p> elements have margin: 1.12em 0; applied (according to the default HTML 4 stylesheet), however browsers and email clients don’t necessarily have to adhere to this. After all, you may want to add a CSS reset for more pixel-precise work.

XHTML for validation

The other thing is, if you put a premium on validating your code (as well as you can when coding for email, anyway), then we recommend the XHTML 1.0 Transitional doctype. Naturally, not having a doctype will throw errors and the HTML5 doctype is still marked as experimental. Mike Kleiman has a light summary on standards vs. quirks mode and email clients, should you wish to get all semantic.

Well, this is by no means an exhaustive test and we’re more than happy to test out specific elements that haven’t been covered here. But the moral of the story is that if you are keen on retaining the default margins on elements (and like CSS3), use the XHTML 1.0 Transitional doctype. That said, there are loads of email clients that arbitrarily add margins and padding to elements, so be sure to check our forums before you pin a rendering issue on the doctype used in your email.

Our friends at Email on Acid have been doing some pretty comprehensive doctype testing themselves. Well worth a read!

What doctype should I use?

After all this deliberation, our recommendation is to use XHTML 1.0 Transitional doctype:

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

This is what we use in our templates – and what has proven to be most reliable to us, overall.

Finally, we’d love to hear about your experiences with doctypes and standards compliance in regards to email, so feel free to give us some food for thought in the comments below.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 250,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free