For Professionals Latest Posts

What doctype to use in HTML emails?

If you know HTML, you must be knowing that the doctype is the maiden line of any HTML document. Although choosing a doctype to design for the web is not that difficult, there is still a lot of doubt about which declaration, rather doctype you should be using to design emails.

Well, in this article, we will help you to do away with your confusion. However, before we get too deep into the discussion, let’s understand what a doctype is.

html email doctype

What is a doctype?

A doctype is the very first line in any HTML document, before the <html> tag. The doctype is not an HTML tag, rather it is a declaration made to the web browser about the version of HTML in which the page is written in.

In HTML 4.01, the doctype refers to a document type declaration (DTD), as HTML 4.01 was based on SGML. The DTD dictates the rules for the markup language so that the content is properly rendered by the browsers.

HTML 4.01 contains three possible doctypes:

HTML4 Strict – This includes all the HTML elements but excludes those that have been deprecated or appear in frameset doctype.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“https://www.w3.org/TR/html4/strict.dtd”>

HTML4 Transitional – This doctype encompasses all HTML elements including the deprecated ones.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“https://www.w3.org/TR/html4/loose.dtd”>;

HTML4 Frameset – This document type covers all the HTML elements in the transitional DTD and also those in framed document.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”

“https://www.w3.org/TR/html4/frameset.dtd”>

Every document created in HTML4 should have one of these three DTDs. However, HTML5 is not an SGML-based language, so it does not require a reference to a DTD and has only one doctype:

<!DOCTYPE html>

It was noticed by standards authors that browsers did not pay attention to the entire code of the previous doctypes. The phrase <!DOCTYPE html> was the only necessary part to trigger standards mode in all browsers. Hence, the declaration was made shorter in HTML5.

Why are doctypes important in emails?

Before we proceed to discuss what doctype you should use for emails let’s throw some light on why the choice of doctype matters when it comes to HTML email documents.

Well, to keep your email templates future forward, you need to write valid code for HTML email. While your clients may change in the future, the email templates you build for your present clients may continue to be used unchanged for several years in the future. Using elements or attributes that are unsupported/deprecated within an email campaign may yield unexpected results during email rendering.

To look at it retrospectively, let’s dig a little deep into the history. It was the time when Internet Explorer 4 and Netscape 4 were thriving, and CSS was hardly being supported in these browsers. These browsers also did not respect the CSS standards. Therefore, it necessitated web developers to code in non-standard ways to get their code to work.

However, as time changed, browser vendors started to show interest in respecting standards, which suddenly caused millions of webpages with nonstandard codes to break. Hence, it became essential to specify a way to instruct browsers to respect standards for new pages without breaking the old ones.

Thus came the doctypes, the declaration that allowed developers to state that they are coding in standard ways. Hence, browsers were able to trigger the right behavior depending on whether you had a doctype or not.

If you do not have a doctype, the browser gets into the Quirks Mode, whereas with a doctype, you are in Standards Mode. Okay, let us enlighten you a little about the Quirks Mode and the Standard Mode.

In Quirks Mode, CSS class and id names are not case sensitive. For example, the CSS selectors below are equivalent in Quirks Mode. However, they are not the same in Standards Mode.

.foo { background:blue; }

.Foo { background:white; }

.foO { background:red; }

Also, the unitless numbers in CSS are interpreted as pixels in Quirks Mode. Hence, the code below works will in Quirks Mode, while it does not function in Standards Mode.

.bar { width:500; }

Browsers’ rendering engines have a huge list of differences between quirks mode and standards mode.

For example, take the following code:

<td style=”display:block;”></td>

The code display:block cannot be applied to <td>s. Even if you apply, nothing will happen. However, this would work if you use a <th> instead of a <td>. This is the reason many email developers are required to use <th> even though it does not make any semantic sense.

Therefore, it is important to have a doctype so that the browsers can trigger the correct standards mode.

So, what doctype should you use in emails?

Well, it depends. The reason is, there might be only a few email clients who respect the doctype you declare in your email and hence your email might be rendered depending on different doctypes. Therefore, understand the differences between the Quirks Mode and the Standard Mode and test different doctypes locally before you set in a doctype for your email.

However, to help you with your choice, we would suggest you to use the XHTML 1.0 Transitional doctype, i.e.:

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

To avoid spacing issues surrounding images as images in tables are treated as inline elements, you need to include the following in CSS stylesheets:

img { display: block; }

If the XHTML 1.0 Transitional doctype appears complicated to you, and if your clients support HTML5 just go with the HTML5 doctype, i.e.:

<!DOCTYPE html>

It is short and easy to remember and is enough to trigger the Standard Mode on supported clients.

Natasha

Natasha

Natasha is a Content Manager at SpringPeople. She has been in the edu-tech industry for 7+ years. With a aim to provide the best bona fide information on tech trends, she is associated with SpringPeople. SpringPeople is a global premier training provider for high-end and emerging technologies, methodologies and products. Partnered with parent organizations behind these technologies, SpringPeople delivers authentic and most comprehensive training on related topics.
Natasha

Leave a Reply

Your email address will not be published. Required fields are marked *

*