HTML Email Doctype: What, Why, and Which One You Should Use
You may have copied and pasted it into email templates a thousand times, but how much do you know about the HTML doctype in your emails? It actually plays a very important part in helping email clients interpret your code.
If you’re just trying to figure out what an HTML doctype is and which one to use in emails, we’ve got your back. Diving into HTML and CSS can be overwhelming, but we’re here to streamline that process. In this article, we’ll go over what a doctype is, why you should use it, and which one you should use.
What is doctype?
Doctype declaration, also known as a document type declaration, is a set of instructions to a web browser or an email client that the following document is written in a particular scripting or markup language. It does so by calling a particular document type definition (DTD) and thus associating it with your document. Check out the following HTML email doctype declaration below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">As a whole, the code above is the doctype declaration. This instructs an email client or web browser to expect a document scripted in HTML 4.01 Transitional. The code that follows after !DOCTYPE is the DTD. We’ll go over what HTML 4.01 Transitional is – along with other possible doctypes – later in this article.
Why is HTML email doctype important?
In the world of HTML email, doctype tells your subscriber’s email client to expect an HTML document written in a particular version of HTML as well as what languages to expect and other key information. With this information, your subscriber’s email client will know how to render your beautiful HTML email template properly.
What is standards mode vs. quirks mode?
“Standards mode” is when you’ve correctly included a doctype declaration and your subscriber’s email client can properly render your HTML email. In this case, you’ve included a correct doctype declaration and in which your email is properly displayed with its CSS and HTML specifications.
If you don’t include a doctype declaration or if your doctype declaration is incorrect, your email will display in “quirks mode.” This isn’t the end of the world, but your document will look messy, amateur, and will probably not display as you intended over multiple email clients, as shown below.
As a rule of thumb, always include a correct doctype declaration at the top of each of your HTML emails.
Which doctype should you use?
Now that we know more about HTML email doctypes, which one should you use? Well, this one’s a bit tricky to answer because it depends, in part, on your subscriber’s email client. Some email clients don’t offer support for certain doctypes. Others strip it away altogether. In this section, we’ll go over the different doctypes, and in the next section, we’ll discuss the email client support for doctypes.
Besides email client support, you need to consider the various HTML elements supported by each doctype. Here’s a list of some recommended doctypes:
- HTML 5
- HTML 4.01: Strict, Transitional, or Frameset
- XHTML 1.0 Transitional
Let’s dive into each of these below.
What’s the HTML5 doctype?
We recommend using the HTML5 doctype if your HTML email template is coded in HTML5. In fact, we recommend you that you use the HTML5 doctype in general. The HTML5 doctype declaration is as follows:
<!DOCTYPE html>If you check out the code inside HTML emails you may seem some other stuff in the <html> tag before the <head> begins. This snippet provides some additional information to clients on how to render your code. That includes the language and schema that helps make things work in problematic Outlook inboxes.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">HTML5 is the latest version of HTML and plays well with CSS and Javascript (although keep in mind that Javascript is not supported in email). It’s intended to give users an all-in-one option to code email templates and add animation, music, videos, and more.
HTML5 has wide support across email clients. In fact, Gmail only supports HTML5 doctype declarations and will render all of your emails, regardless of doctype declarations, with HTML5. However, sometimes the HTML5 doctype adds an extra space under your images. You can correct spacing issues by adding a display block to your image, as shown in the example code below:
<img src="test.jpg" style="display:block">What are the HTML 4.01 doctypes?
We recommend that you use one of the following HTML 4.01 doctypes if your HTML email template is coded in HTML 4.01. However, note that HTML 4.01 isn’t used much, and may not be supported (or get switched) in email clients like Gmail.
There are three HTML 4.01 doctypes:
- HTML 4.01 Strict
- HTML 4.01 Transitional
- HTML 4.01 Frameset
HTML 4.01 Strict includes all HTML elements. However, it excludes HTML elements that have been deprecated or appear in frameset doctype. Its doctype declaration is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional includes all HTML elements, including deprecated ones. However, it doesn’t contain elements included in the frameset doctype. Its doctype declaration is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"HTML 4.01 Frameset includes all HTML 4.01 Transitional HTML elements as well as frameset elements. Its doctype declaration is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">What’s the XHTML 1.0 Transitional?
XHTML, the Extensible Hypertext Markup Language, is part of the XML family of languages. It extends versions of HTML. Prior to HTML5, XHTML was usually recommended for email coding, as the XHTML doctype has wide support across email clients. XHTML helps interpret and render “bad” markup, including poor HTML. The XHTML 1.0 Transitional doctype declaration is as follows:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">What’s the client support like for doctype?
As we mentioned above, support for HTML email doctype varies across email clients. Check out the chart below to see which major email clients support HTML doctype declarations.
First, you can’t avoid it. Many email clients strip your doctype and either impose their own or leave it out entirely. Here’s a breakdown:
| Email Clients | Doctype support? |
| Gmail | Only accepts HTML5 doctype, will automatically render your doctype as HTML5 |
| Apple Mail | YES |
| Microsoft Outlook (Windows Mail, MacOS, Outlook.com, iOS 2021-11, Android 2021-11) | YES |
| Microsoft Outlook (iOS 2019-07, Android 2019-07) | Buggy: renders as with no doctype or as HTML5 |
| Microsoft Outlook (Windows 2007-2019) | NO |
| Yahoo Mail (iOS, Desktop) | YES |
| Yahoo Mail (Android) | NO |
| AOL (iOS, Desktop) | YES |
| AOL (Android) | NO |
Don’t forget to test!
Before you send out your email, we recommend that you use our testing tool to see how your subscribers will see your message.
While testing, we recommend that you strip out your doctype and view your email layout in Firefox, Chrome, Safari, and Opera.
By adding a doctype when you run your Email on Acid Test, we’ll be able to validate your HTML before you get your test results. We provide code validation for many reasons. The first is to ensure that our test results are accurate. Secondly, your code will be interpreted within the UI of each of the web-based email clients – if you have a stray </div>, that could have a big effect on the way your email is rendered.
Wrapping up
And that’s it! Hopefully, these tips will help your emails render in your subscriber’s inbox. Head over to Email on Acid if you’re ready to get sending. Let us give your well-crafted emails a final check before you hit send.
This article was updated don August 8, 2022. It was first published in November of 2010.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
19 thoughts on “HTML Email Doctype: What, Why, and Which One You Should Use”
Comments are closed.
Really liked the advises. Particularly the `<style=”display:block”>` is very interesting. I’ll test it out.
If it comes to it, one final resort could be using different doctypes for different receivers. For self-coded/maintained projects it shouldn’t be tough to provide different doctypes per receiver’s email address domain.
Great stuff, then I guess what we should use is strict XHTML?
So are you recommending that self closing tags should also be used if using an XHTML doctype?
Cheers.
Yes, it’s recommended that you test without a DOCTYPE in all browsers, then test using the Gmail/Hotmail DOCTYPE which is:
And yes Mark, it’s probably best to use self closing tags. Our validation tool will pick up any issues as long as you include the strict DOCTYPE in your header when testing.
Thanks guys (great memorable url by the way). Today our firm went to IE8 and quickly I have to re-code our html email template because it’s previewing wrong.
I was looking for the recommended doctype to use so this is invaluable advice.
Thx for the article!
Another issue in Gmail is that inline images get a white border or space around them, which can greatly break your design.
If display:block doesn’t help, you should try “line-height:0;” to the
Thanks for the tips!
What’s the fix for “There may be a difference in the way your text links appear (colored underlines)”? I usually declare the color in the and tags, am i covered?
A very Nice and Helpful Post..Thanks for Sharing
Warning Line 70, Column 1: <style> isn’t allowed in <body> elements. Acid does not recommend any kind of fix. And the only WC3 HTML Validation error was the expected <style type=”text/css”> Blah Blah Blah!
before </body> tag and a UTF-8 code Warning about older Browsers
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
Michelle, thank you very much for the great tips. I am still having problems with the line height and small fonts. Would you please give me an example of using paragraph elements or TDs for formatting the small fonts? Thank you.
@TestMyEmails, Try wrapping your small fonts inside a paragraph tag with an inline line-height:
text
Cool https://www.emailonacid.com. Offtopic: Who will play in the final of the Champions League Cup?
Nice Post. Very essential for me. Great thanks. Continue ….
Is this list still uptodate?
waurin,
I’m not sure how accurate this list is now. We’ll put it on our list of blogs to revisit!
Reminder: this blog post is 4 years old. HTML email is very idiosyncratic. I personally have had best success with:
Also, I don’t get the thinking behind the process of testing with and without doctype in all those web browsers. I thought that was the point of testing in email on acid.
Also, maybe I’m weird, but I don’t worry about validating too much, definitely not one of my main concerns. The “stray div” is a syntax error and you definitely don’t want any syntax errors.
Great article but it confuses me a bit. You first say “ – this doctype will cause all browsers to render your box elements consistantly.” then “The new DOCTYPE for HTML 5 () causes the same image spacing issues as Hotmail!”. So it’s good or not to use the HTML5 doctype? Thanks, Vic
usefull reading will test it out today
thanks for the post
Very great post. I just stumbled upon your weblog and wanted to say that I have really
loved browsing your weblog posts. After all I will be subscribing on your
rss feed and I am hoping you write once more very soon!