Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
You may have copied and pasted it into email templates a thousand times, but how well do you know the HTML document type in your emails? In fact, it plays a very important role in how email clients interpret your code.
If you just want to figure out what an HTML document type is and which one you should use in emails, we've got you covered. Delving into HTML and CSS can be overwhelming, but we're here to simplify that process. In this article, we'll go over what a document type is, why you should use it, and which one you should use.
What is Doctype?
A doctype declaration, also known as a document type declaration, is a set of instructions to a web browser or email client that the following document is written in a specific scripting or markup language. This is done by calling a specific document type definition (DTD) and linking it to your document. Take a look at the following HTML email doctype declaration below:
Overall, the above code is the doctype declaration. This tells an email client or web browser to expect a document written in HTML 4.01 Transitional. The code that follows !DOCTYPE is the DTD. We'll discuss what HTML 4.01 Transitional is – and what other doctypes are possible – later in this article.
Why is the HTML email document type important?
In the world of HTML email, Doctype tells your subscriber's email client to expect an HTML document in a specific HTML version, what languages to expect, and other important information. With this information, your subscriber's email client knows how to properly render your beautiful HTML email template.
What is Standard Mode vs Quirks Mode?
“Standard mode” is when you have correctly included a doctype declaration and your subscriber’s email client can correctly render your HTML email. In this case, you have correctly included a doctype declaration and your email will display correctly with its CSS and HTML specifications.
If you don't include a doctype declaration, or your doctype declaration is incorrect, your email will appear in “quirks mode.” It's not the end of the world, but your document will look messy and amateurish, and will likely not display as intended in several email clients, as shown below.
As a rule of thumb, always include a correct doctype declaration at the beginning of each of your HTML emails.
Which document type should you use?
Now that we know more about HTML email document types, the question is which one should you use? Well, this question is a little difficult to answer because it depends partly on your subscriber's email client. Some email clients don't offer support for certain document types. Others don't offer it at all. In this section, we'll go over the different document types, and in the next section, we'll discuss email client support for document types.
In addition to email client support, you also need to consider the different HTML elements supported by each document type. Here is a list of some recommended document types:
- HTML5
- HTML 4.01: Strict, Transitional or Frameset
- XHTML 1.0 transition version
Let us look at each of these points in more detail below.
What is HTML5 document type?
We recommend using the HTML5 document type if your HTML email template is coded in HTML5. In fact, we recommend that you use the HTML5 document type in general. The HTML5 document type declaration is as follows:
If you check the code in HTML emails, you may see other things in the Day before the
This snippet provides clients with some additional information about how to render your code. This includes the language and schema that make things work in problematic Outlook inboxes.HTML5 is the latest version of HTML and works well with CSS and Javascript (but note that Javascript is not supported in emails). It aims to provide users with a complete solution to code email templates and add animations, music, videos, and more.
HTML5 is supported by many email clients. In fact, Gmail only supports HTML5 doctype declarations and renders all your emails with HTML5 regardless of the doctype declarations. However, sometimes the HTML5 doctype adds extra spacing below your images. You can fix spacing issues by adding a display block to your image as shown in the sample code below:
What are the HTML 4.01 document types?
We recommend using one of the following HTML 4.01 document types if your HTML email template is coded in HTML 4.01. However, please note that HTML 4.01 is not widely used and may not be supported (or may be transitioning) in email clients such as Gmail.
There are three HTML 4.01 document types:
- HTML 4.01 Strict
- HTML 4.01 transition version
- HTML 4.01 frameset
HTML 4.01 Strict includes all HTML elements. However, it excludes HTML elements that are deprecated or appear in the frameset doctype. Its doctype declaration is as follows:
HTML 4.01 transition version contains all HTML elements, even deprecated ones. However, it does not contain any elements contained in the frameset doctype. Its doctype declaration is as follows:
HTML 4.01 frameset contains all HTML 4.01 Transitional HTML elements as well as frameset elements. The doctype declaration is as follows:
What is the XHTML 1.0 transition version?
XHTML, the Extensible Hypertext Markup Language, is part of the XML family of languages. It extends versions of HTML. Before HTML5, XHTML was usually recommended for email encoding because the XHTML document type is supported by many email clients. XHTML helps interpret and render “bad” markup, including bad HTML. The transitional document type declaration for XHTML 1.0 is as follows:
What is the client support for Doctype?
As mentioned above, support for HTML email doctypes varies by email client. The following table shows which major email clients support HTML doctype declarations.
First, you can't avoid it. Many email clients will strip your doctype and either impose their own or leave it out altogether. Here's a breakdown:
Email clients | Doctype support? |
Gmail | Only accepts HTML5 doctypes and automatically renders 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) | Faulty: rendered as without 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 sending your email, we recommend using our testing tool to see how your subscribers view your message.
During testing, we recommend that you remove your document type and view your email layout in Firefox, Chrome, Safari and Opera.
By adding a doctype when running your email on Acid Test, we can validate your HTML before you get your test results. We offer code validation for many reasons. The first is to make sure our test results are correct. Second, your code will be interpreted within the UI of any web-based email client – if you have an error