Note: This is the first of two articles examining the use of HTML5 tags in email. In this article, we look at <mark>, <progress>, and <canvas>. In the second article, we’ll take a look at the <video> and <audio> tags.
When it comes to email, common wisdom says you should code it “like it’s 1999.” Using the latest HTML tags is considered risky business in email. Email clients throw out using scripting, and the implementation of new tags is spotty at best. Styling is best handled in-line, but visual editors, such as Dreamweaver, don’t always make this easy, preferring instead to place any style information either in a separate CSS file, or between the <head> tags, which can be lost when an email reaches the inbox.
Erring on the side of caution is usually a good idea, but sometimes we email marketers take this advice a little too far, avoiding useful techniques because five years ago they didn’t work. A good example of this is the relatively rare use of image maps in email, in favor of the more problematic and file-swelling sliced images (see Keeping It Together—Image Slicing vs. Image Mapping). So what about HTML5? Is it worth trying? Some of its new features are intriguing, particularly the <video> tag, but can you use them in email. Here’s what we found out.
Meet the New Tags
HTML5 removes (i.e., deprecates) a few old tags from HTML4 and adds thirty new ones. Several of these new tags, such as <article>, <aside>, and <section>, have little use in email; three of the new tags—<details>, <dialog>, and <summary>—will only work in Chrome and Safari at this time; and some tags, such as the <bdi>, <ruby>, <rt>, and <rp> tags, are specifically designed for use with other languages and are beyond the scope of this article.
Some tags may not have much practical value, but could be useful for creating visually interesting email without having to rely on images. Examples of this are the <mark> tag which makes text look as if it has been highlighted with a marker, and the <progress> tag, which creates an animated green bar similar to the ones seen when downloading files:
[Note: These are screen representations. WordPress.com does not support all the HTML5 either.]
Unfortunately, in our tests, <mark> only worked in Thunderbird and Outlook.com, and <progress> only worked in Outlook.com (by far, the most HTML5 compatible email client available). Given such limited application, these tags are of little use at this time for email marketing purposes.
One new feature that looked as if it might have real value for email is . With , it is possible to create graphics directly on a page without linking to a file. You can already do this, to a certain extent, with
tags, but offers more controls and possibilities. In our tests, however, did not work in any email viewers, stand-alone or browser-based. This isn’t surprising considering that the primary intended use for is to create graphics on-the-fly using scripting. As a rule—primarily for security and virus reasons—email clients strip out any scripting found in an email.
Coding Like It’s 2011
It’s apparent that, as far as email is concerned, HTML5 still has a long way to go before most of its features become useful to email marketers. As is always the case, the email clients are the last to adopt the latest features in each iteration of HTML; so, while it may not be necessary to code like it’s 1999, you might want to stick to coding like it’s 2011 for now. We will keep testing these features and as soon as any of them are available across multiple email clients, we will report on it here. One new feature of HTML5 that is shaping to have real value to email marketers is its video feature. There a lot to say on this subject, so we’ll be talking about it in a separate article. We’ve also created a white paper on the subject, available here: Video in Email white paper.
Next: Audio and Video in Email with HTML5.
The Goolara Blog 
This is a really nice explanation of which elements you can and can’t use in HTML5 email. Even now I still use tables to outline emails. I don’t do it very often so I’ll stick to my way for now but this article was very insightful and helpful. Thank you for posting.
Thanks Tony,
Of the HTML5 tags, it looks like the video tag is one that is the most usable and useful (see part two). I still use tables too.