HTML reference for email

With the multitude of email client, browser, and platform combinations, it may not be possible to make your messages appear the same to all recipients. However, if you adhere to these proven best practices, you can code to one widely compatible standard for consistently reliable rendering.

General HTML quick reference

Code your messages with the HTML 4.01 transitional document type definition or lower and declare its use at the beginning of the code. See W3C for details on the 4.01 transitional DTD.
Include the DTD definition at the top of your code.
Specify character encoding, which is either ISO-8859-1 or UTF-8.
Forms should be hosted on your website or as a landing page in where they can be linked to from within your emails.
Use CSS3 media queries to provide alternate responsive styles for mobile device rendering.
If you include comments, keep them to a single line.
Use only inline CSS and limit that to font-related definitions only. Embedded and external CSS is not widely supported and is a common cause of rendering issues.
Do not use div or span tags for positioning or CSS-based layout. This approach does not work in email.
Do not rely on cellpadding, cellspacing, or CSS padding and margins. They are not supported and can cause to rendering issues.
Set the background color for an entire message by using a parent table that is 100% wide with a bgcolor value.
Replace the following characters with HTML entities or use ASCII equivalents: © ® ™ – — … ’ " UTF-8 encoding supports © and ® directly.
Do not use embed tags.
Host all images. Do not attach images.
Avoid background images.
Include alt tags for all images. For images where alternate text is not relevant, include a blank <alt> tag. For example, <img... alt="">.
To display Arabic content right to left use . When you type in Campaign, the text will still go left to right, however, after you publish or preview, it should display correctly. You could also create your HTML in text editor, such as Notepad, and copy the source code into Campaign.
Before you test or send an email, be sure to validate the code and correct any issues. A good source for validation is W3C Markup Validation Service.
Code for multiple screen types and test extensively in as many email clients as possible.
The presence of any scripting language code is almost always flagged as potentially malicious and leads to your message being kept out of inboxes by any respectable spam filter. To protect against this, HTML email bodies are automatically stripped of any scripting language when found.

Warning: If you use a user-defined span class code, the break tag  might be moved out of the span class, for example,  . To resolve this issue, disable the Design (WYSIWYG) view (in Settings > User profile) and work in source view.

The Document Type Definition (DTD)

At the top of your HTML code, include the document type definition or DTD. The DTD defines the markup language specification that is used and determines how the browser or email client interprets and renders the HTML. Some email clients might strip the DTD, but it should be included during development for code validation.

HTML email can safely be coded as either HTML 4.01 Transitional or XHTML 1.0 Transitional. HTML 4.01 Transitional is recommended because it has fewer coding requirements than XHTML 1.0 Transitional.

XHTML 1.0 Transitional supports the entire HTML 4.01 Transitional specification. It also requires that all tags and attributes are lowercase and that all tags are properly closed. Tags that do not have a separate closing element, such as the   tag in HTML 4.01, require a closing space and slash in XHTML. For example:  .

The following example shows the code for the respective DTDs. Select one of the DTDs to include before the opening HTML tag.

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Character encoding

In the head of your HTML code, define the character encoding. Character encoding determines what characters can be displayed in your message. There are two types of character encoding:

ISO-8859-1 (ASCII)
UTF-8

The American Standard Code for Information Interchange (ASCII) is a character encoding standard based on the English alphabet. It is the default character set used in American digital communications. The ASCII character set is represented in the Western European character encoding, which is defined in HTML as:

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

For emails that consist of non-English language characters, use the UTF-8 character set because it supports all languages. For example, if your message requires the Chinese character set, you must use the UTF-8 character set, which is defined in HTML as:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

UTF-8 is becoming the dominant character encoding of the web with many Internet standards organizations that require full UTF-8 support in email programs. It is also increasingly becoming the default encoding for operating systems, programming languages, applications, and APIs. In fact, UTF-8 can be used for English language emails as well because it supports the entire ASCII character set as well as international characters. It also supports symbols such as ® and © without any HTML conversion required.

Cascading style sheets

Cascading style sheets (CSS) are used to code presentation elements on the web. There are three different ways to include CSS:

External CSS points to an externally hosted style sheet file. External CSS is not supported.
Embedded CSS is code that is defined in the head of the HTML code. Embedded CSS is poorly supported across desktop email clients.
Inline CSS is defined where is it needed, throughout the document. Inline CSS is the only reliable option for styling your email content.

The following list of inline CSS properties are consistently supported among the major email clients. The supported properties are mostly limited to basic font-related definitions. There are no margin, padding, or positioning properties.

font-family
font-size
font-weight
color, which is used for defining link colors
text-decoration
display, which is used in image tags to fix a bug in Gmail and Outlook.com.

For example:

<TD style="font-family:arial,helv,sans-serif;font-size:12px;color:#ff0000;">Sample
text.</TD>

Do not to use short values for CSS. For example, use #FFFFFF not #FFF.

Do not use list styles because they are not supported in several clients.

There are two exceptions where embedded CSS can be effectively used:

As fixes for well-known bugs in email clients that don’t strip out embedded CSS
CSS3 media queries for styling content specifically for mobile devices

Special characters

The following table illustrates the special characters that might require special attention when they are used in email. These characters can’t be typed directly into your message and can be problematic by displaying as blocks or question marks.

Description	Character	HTML entity	ASCII equivalent
Copyright	©	©	(C)
Registered trademark	®	®	(R)
Trademark	™	™	(TM)
En dash	–	–	–
Em dash	—	—	—
Ellipsis	…	…	…
Apostrophe	'	’	'
Open quote	«	“	«
Close quote	»	”	»

If you use these characters in your email, replace them with either the HTML entity (in HTML code) or the ASCII equivalents (in text content). It is common practice to use the ASCII equivalents for the apostrophe, quote, em dash, en dash, and ellipsis characters in your HTML, although the HTML entities are the typographically correct characters.

Consider setting the auto-format and auto-correct options in your word-processing application to use the ASCII equivalents of these characters instead.

Note: UTF-8 encoding supports © and ® directly.

Comment tags

Comments are great for labeling or explaining source code. Comments can be used safely, but only if they begin and end on the same line. There should be no hard breaks between the comment start and end tags.

If you comment out sections of your code, remove any content that you don't want displayed before you send. AOL Mail displays content that was commented out if the comment mark-up spans multiple lines.

Email address links

Email addresses that appear in messages are usually converted into links. If you want to retain control of the appearance of your message, code email addresses as mailto links. Then, you can apply a color style to the link and make it consistent with the rest of your design. Apply this link to email personalization strings also. For example:

<a href="mailto:%%email%%" style="color:#ff0000">%%email%%</a>

Spacing issues

Don't use padding or margin styles to control the spacing in your HTML message because these styles produce mixed results across major email clients.

Yahoo! Mail does not handle spacing between  tags the way you would expect. Instead of adding a line of white space between paragraphs, it adds only a line break (  tag). Instead of using  tags, use two line breaks tags or table cells for consistent content spacing.

Tables

Define <table> and <td> widths.
Do not use height definitions for table and table cells.
Remove extraneous spacing between table cell content and the closing </td> tag.
Where necessary, control spacing with table cells. Do not use CSS margin and padding styles.
Provide space for cell content in table layouts that break when cell dimensions are exceeded.
Simplify table structures where possible by stacking tables to reduce rowspan and colspan needs.

Images

Optimize image file sizes.
Define width and height for all images.
Include alternate text attributes even if they are blank, which is coded as alt="".

Nested elements

Campaign rearranges nested elements if the outside HTML element is not closed correctly.

The proper syntax of an anchor tag that contains an image tag is as follows:

<a href="www.yourcompany.com"><img src="logo.gif"/></a>

This example creates an image that, when clicked, goes to yourcompany.com. The initial anchor tag does not contain a forward slash, which is correct.

An anchor can be built improperly, with a forward slash in the closing tag like this example:

<a href="www.yourcompany.com"/><img src="logo.gif"/></a>

In this example, rearranges and rewrites the elements like this example:

<a href="www.yourcompany.com"></a><img src="logo.gif"/>

In this example, the image is no longer part of the link and the template does not work as intended. Be sure to use correct syntax and always test your templates before you send your email.

Text-only

Use a plain-text-only editor, such as Notepad.
Use a combination of white space and formatting visual-aids to make content easy to scan.
Use ASCII equivalents for the following characters: © ® ™ – — … ’ " "

Note: UTF-8 encoding supports © and ® directly.

Put links on their own lines, not embedded in the text.

Note: MHTML is not supported.

Bullet color

You can include non-black colors in your messages by adding HTML code that defines the colors into the original HTML before you import it into the system.

You can use or modify the following sample code in your HTML:

<html> <body bgcolor="#FFFFFF" text="#000000"> <div
style="color:#ff0000;"> <ul> <li> <font color="#000000">Apple</font>
<li> <font color="#000000">Orange</font> <li> <font
color="#000000">Grape</font> </ul></div></body>
</html>

Background color

The HTML background attribute is deprecated in HTML 4.01. The best practice in email design stipulates that you do not use background images. You can still code for them, but you might experience some issues with display in some email clients.

You can hardcode an absolute URL of an image in the background tag so that does not handle the hosting of the image. For example, don't include the image in the .zip file, but reference a full image URL.

Tip: We strongly advise against using any sort of background image.

When you import HTML code that contains background attributes of body or table, some browsers (such as IE9) and their DOM can cause to add xt="SPCELL" code, which causes more problems. Essentially, it amounts to WYSIWYG and not gracefully handling hosted images in the background properties of the HTML body tag or table cells.

To resolve the issue, after you import your file, remove the xt="SPCELL". Make sure you're defaulting into Source view.

Don't click design view before you remove the xt="SPCELL" code.

Another possible workaround is to use Firefox, which seems to handle this issue better.

Importing HTML

Don't import HTML created by any Microsoft™ Office application. HTML created from Microsoft Office applications has many non-standard XML references, as well as div and style tags, that are not supported in most email environments. If you import HTML created from an Office application into the application by using the Import HTML feature, you might see many errors. If you choose to do this, use the Paste from Word tool in the email layout.
Name all your links before you import HTML to avoid issues later. If you import your HTML without names for your links, Campaign automatically assigns names by using the first 37 characters of the URLs.

HTML and CSS limitations in email clients

Recipients use many different email clients, each of which might have known issues and workarounds.

Google Gmail

Background color in body tags is not supported. If you want your entire message to have a specific background color, put the message content in a table and specify the width as 100%. Then, define the background color in the table tag.
Background images are not supported.
Embedded CSS is not supported. Instead, use inline CSS.
Sliced image-based tables: Gaps occur between vertically adjacent images. Use the attribute style="display:block" in the affected img tags.
If your email images don't display in Gmail, it's likely because the image name contains a space. Gmail converts spaces in image names to plus signs (+), which results in a broken image. You must modify your image names in so that they don't contain spaces.

Microsoft™ Outlook.com

Body tag bgcolor is not supported in Internet Explorer.
Line height is not supported.
Sliced image-based tables: Gaps occur between vertically adjacent images. Use the attribute style="display:block" in the affected img tags.
Bookmark links are not supported.

Microsoft Outlook

Float style is ignored.
List styles are ignored, meaning no images for bullets, square bullets, or lists without bullets.
Images
- Background images are not supported.
- Specify the actual width and height of all images. Stretched images such as bars or borders might not be rendered as intended.
- The image height limit is about 1700 px high. If this maximum height is exceeded, the image is cut off.
- The align attribute for images is not supported.
- Outlook 2013 has a default minimum height of about 18 pixels. If you see unexpected gaps between table rows, this might be the cause. The workaround here is to define line heights by using inline CSS.
 Include the following code in all <td> tags in the row where you see this issue, where X is the height of the row or line:
```
<td width="168" height="X"
style="font-family:arial,helv,sans-serif;font-size:9px;color:#000000;line-height:Xpx;">
```
- Margins are ignored for images. Consider adding white space to the image for the desired effect.
- Valign for images is ignored.
Tables
- Define widths for all table cells and verify that they "add up" correctly. For example, if your table is 500 pixels wide and consists of two equal columns, their widths should be set to 250 pixels each. For example, <td width="250">. Outlook often has problems rendering tables with incorrect table cell values or no values at all.
- Outlook imposes a minimum height of 2 pixels on all cells. Therefore, a 1x1 pixel transparent GIF with a background color that is commonly used for formatting or borders appear thicker than expected.
- A large unwanted horizontal gap is created in table structures that exceed around 1700 pixels. This usually happens in long newsletter-type layouts. Avoid tables that require this much height. Consider breaking long table structures into several shorter stacked tables. This can affect content in nested tables that are part of a much longer table.
For text-only email line breaks, Outlook does not always honor hard line breaks. If you don't see line breaks where you expect them, try adding three spaces (press the space bar three times) at the end of lines where you need line breaks.

Yahoo! Mail

Background color in body tags is not supported. If you want your entire message to have a specific background color, put the message content in a table and specify the width as 100%. Then, define the background color in the table tag.
There is no spacing between paragraphs as you would normally expect. As an alternative to the  tag, use either two   tags or table cells between paragraphs.
There is a version of Yahoo! Mail that overrides text link colors to be a grayish blue. This can cause problems when the background color is dark, which makes text links difficult to read. To fix this issue, wrap the link text in a span tag that repeats the color definition. Example:
```
<a href="url_here" style="color:#ff0000">Link text
here</a>
```

Occasionally, Yahoo might remove the HTML code from an email and show blank content.

Check whether your email uses HTML5 declaration tags:

<!doctype html> <html> <head> <meta charset="UTF-8">

If so, use HTML4 standard tags instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

IBM Notes®

Bookmark links are not supported.
Images smaller than 5x12 are not supported. Notes enlarges these images to the minimum requirement, which can impact your layout if you use images that are smaller than 5x12 in table cells.
vspace and hspace are not supported.

General HTML quick reference

The Document Type Definition (DTD)

Character encoding

Cascading style sheets

Special characters

Comment tags

Email address links

Spacing issues

Tables

Images

Nested elements

Text-only

Bullet color

Background color

Importing HTML

HTML and CSS limitations in email clients

Google Gmail

Microsoft™ Outlook.com

Microsoft Outlook

Yahoo! Mail

IBM Notes®

Join the community

Academy

General HTML quick reference

The Document Type Definition (DTD)

Character encoding

Cascading style sheets

Special characters

Comment tags

Email address links

Spacing issues

Tables

Images

Nested elements

Text-only

Bullet color

Background color

Importing HTML

HTML and CSS limitations in email clients

Google Gmail

Microsoft™ Outlook.com

Microsoft Outlook

Yahoo! Mail

IBM Notes®

Related articles

Join the community

Academy