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.
Table of content
-
01
What is doctype? -
02
Why is HTML email doctype important? -
03
What is standards mode vs. quirks mode? -
04
Which doctype should you use? - What’s the HTML5 doctype?
- What are the HTML 4.01 doctypes?
- What’s the XHTML 1.0 Transitional?
-
05
What’s the client support like for doctype? -
06
Don’t forget to test! -
07
Wrapping up
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.
