Interactive emails are all the buzz in the digital marketing world nowadays. They give your recipients an app-like experience and give you a much better conversion and engagement rate. HTML is the building block for these engaging and visually appealing interactive emails.
You may have also encountered emails with alignment or rendering issues, resulting in a bad experience. One of the reasons behind this could be the HTML email doctype. This article explores the various HTML doctypes available and the one you should choose for your HTML interactive emails.
What is HTML email doctype?
An HTML email doctype tells a web client or email client what version of HTML your email uses. This helps the email client render your HTML email the way it was intended to.
Technically, it is a null element and doesn’t contain any content within it. There are a few types of HTML email doctypes available today, and we’ll explore them later in this article.
What is a doctype and why should you use it?
A doctype or document type declaration (DTD) is an instruction to the web client about the version of markup language your document or web page is written in. The doctype declaration appears in the first line of the HTML code of your email.
The use of doctype declaration is emphasized because it guarantees proper rendering of your HTML email or web page, which is known as the standards mode.
In the absence of a doctype declaration, there is a possibility that the email client may not render the HTML email or web page properly and open it in quirks mode, which is an incorrect rendering of your email or web page, resulting in it looking messy and unformatted.
💡 Related guide: Email Format: Tips, Best Practices, and 7 Examples to Follow
Now, take a look at the major clients that support HTML doctype declaration.
| Email client | Supports doctype? |
|---|---|
| Gmail | Only accepts HTML5 doctype. Automatically renders any 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 |
Become an email marketing expert in 90 mins
On-demand certification to master email marketing
Types of HTML doctypes
Returning to the different types of HTML doctypes, there are four. Take a look at them one by one and what the code looks like.
1. HTML5
HTML5 is the latest markup language version used for creating web pages and emails. It is an all-in-one option to code email templates. It allows the use of apps, music and animations. Many email clients even force HTML5 for rendering emails.
This is what the code looks like:
<!DOCTYPE html>
Next up on the list is HTML 4.01. It has three different types of declarations.
2. HTML 4.01 Strict
HTML 4.01 Strict contains all the HTML elements but doesn’t allow deprecated elements, presentational elements (< font >, < center >, etc.) or framesets.
This is what the code looks like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3. HTML 4.01 Transitional
HTML 4.01 Transitional contains neither all HTML elements nor includes framesets, but it includes presentational and deprecated elements.
This is what the code looks like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4. HTML 4.01 Frameset
HTML 4.01 Frameset allows for using of framesets too.
This is what the code looks like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
You may even come across XHTML doctypes besides the four HTML doctypes. XHTML doctypes help interpret bad markups and require using body tags like < head >, < body >, etc., which aren’t necessary for HTML doctypes. There are 4 types of XHTML doctypes as well.
For our email marketing campaigns, we use the XHTML 1.0 Transitional doctype. This doctype works best for us because it can identify bad markup. To eliminate poor HTML and avoid the use of framesets, this works great. This doctype comes with presentational elements, which makes it easier for us to use interactive emails for the purpose of marketing. We’ve had no issues so far with this doctype and plan on using it in the future as well.
-Perry Zheng, CEO, Cash Flow Portal
5. XHTML 1.0 Strict
XHTML 1.0 Strict contains all HTML elements but does not allow for presentational elements, deprecated elements or framesets.
This is what the code looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6. XHTML 1.0 Transitional
XHTML 1.0 Transitional contains all HTML elements and allows for presentational and deprecated elements but doesn’t allow for the use of framesets.
This is what their code looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7. XHTML 1.0 Frameset
XHTML 1.0 Frameset contains all HTML elements, allows for presentational and deprecated elements and also for the use of framesets.
This is what the code looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
8. XHTML 1.1
XHTML 1.1 is the same as XHTML 1.0 with the addition of allowing to add extra modules.
This is what the code looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Which HTML doctype should you use for your emails?
The main factor behind you choosing the right doctype should ideally be what kind of email you’re sending. HTML5 is the newest version and should work for you in most cases.
Some developers also recommend XHTML 1.0 Transitional and HTML 4.01 Transitional doctype declarations.
In the end, you shouldn’t rely too heavily on the possibility of your email being compatible with a particular doctype. A failsafe would be to validate your email through W3C Validator to identify any issues with your markup.
My go-to doctype for creating interactive HTML emails is HTML5. It's the newest iteration of HTML, and it's broadly supported across numerous email clients, making it a dependable option.
The HTML5 doctype is simple and clean, starting with a straightforward. This makes it user-friendly and easy to apply. What's more, HTML5 is particularly versatile and provides superior support for incorporating multimedia content - a vital feature when crafting interactive emails.
-Sudhir Khatwani, CEO, The Money Mongers
💡 Related guide: How to Create And Send HTML Email & Templates in 2023
Final takeaway
The various HTML email doctypes will help better rendering of your engaging, interactive emails on various devices and email clients. It is to be noted though, that interactive/AMP email only support HTML5 doctype. Moreover, if you find using HTML to create your interactive emails difficult, you can even check out AMP emails. Mailmodo is an all-in-one email marketing platform that allows you to create interactive emails using its intuitive drag-and-drop editor without having to code.
