Observing HTML best practices rules

We present you here the best practices rules that you should respect to ensure that your HTML files work correctly and that it works properly in your recipients' mail client.

Images

Defining the image width

To ensure a proper display of the email, as well as to prevent that the replacement text of some mail clients distorts the layout, you have to define a width for your images.

How to do it?

Add the attribute 'width' of the <img/> tag

Example
<img src"path" width="200"/>

Adding an "alt" attribute to an image

An alternate is a text that will be displayed in the email if the user doesn’t accept the images. It is important for various reasons. First, it allows easy reading for the visually impaired users and enables the reader to have an idea of what the image is even without seeing the image, especially on mobiles were images are generally blocked. Second, it will increase the text/image ratio, which will reduce the spam points.

How to do it?

Add the alt attribute on tag <img src=""/>

Example
<img src"path" alt="My alternative text"/>

Putting images 'display block'

A display: block; is used to avoid the generation of white spaces below an image.

How to do it?

Add the 'style' attribute with the property 'display: block' on the <img/>

Example
<img src"path" style="display:block;" />

Putting the title attribute on images

To make the reading easier for those visually impaired, it is most advisable to alternate text on images. This text also helps increase the text / image ratio, which reduces the points of spam.

How to do it?

Add the title attribute on <img/>.

Example
<img src"path" title="My text remplacement"/>

General rules

Tag attributes must be in quotation marks""

The idea here is to standardize the code.

Example
<img src="path" style="display:block;" />

Use xhtml 1.0 doctype

To standardise the rendering of e-mails in most mail clients, we strongly recommend to place a doctype on the top of your e-mail.

How to do it?

Put the doctype before the opening of the html tag.

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

Use 'table' rather than 'div'

The table helps ensure a good visual record of e-mails. Some mail clients have difficulty supporting the float, margin, padding...

How to do it?

Use <table> ... </ table>

Example
<table>
<tr> <td> My text </td> </tr>
</table>

Indent Code correctly

For easy reading of the code, we suggest to always indent your html code.

How to do it?

Make a positive withdrawal for each child and a hanging indent for each parent. Thus, the closing and opening tags torque will always be of the same height.

Define the size of 'td' and 'table'

To ensure a good visual rendering on most mail clients, always fix the td and table size.

How to do it?

Including the attribute 'width' in the tag with a value without specifying the format.

Example
<td width="200px"> </td>

Use a table of 100% for a background color on your e-mail

Many mail clients ignore the background colors defined in the css or the 'body'. To work around this problem, you can create a table with a 100% bgcolorattribute above.

How to do it?

Create a table 100% around your e-mail and place the bgcolor property above.

Example
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000">
<tr>
<td width="100%" bgcolor="#000000">
Rest of the email
</td>
</tr>
</table>

Create a space between two horizontal zones

To ensure uniformity in the different mail clients, the spaces between two areas must be created through a table.

How to do it?

To create a space between two areas, create a blank line in a 'table' with attributes 'line-height' and 'height' defined. Both attributes are important because some email clients include only one or the other. Using <br /> to create large spaces between the lines is not recommended, because the height of a <br /> may differ from one email client to another.

Example
<tr>
<td valign="top" align="left" height="10" style="font-size:1px; line-height:10px;">
 
</td>
</tr>

Format text in 'td'

To dress the text located in a <td>, add a style attribute on the tag. It is absolutely necessary to repeat all the properties of text wrap because some mail clients include only one or the other.

How to do it?

Add to all the <td> containing text the following css properties:

  • Font-size

  • Font-family

  • Color

Exmaple
<td valign="top" align="left" style=" color: #336699;"> The text of td </td>

Using a color code

It is possible to change the color of your text in your html.

How to do it?

Add the property color: xxxxx; in the style attribute.

Example:
<td valign="top" align="left" style=" color: #336699;">
The text of td
</td>

Convert special characters to HTML entity

To ensure that special and accented characters are properly displayed, you have to convert html entity.

How to do it?

The é becomes &eacute; See the following link: w3schools.

Example
&eacute;t&eacute; = été

Using specific fonts

To ensure a proper font display and rendering, use only web fonts. It cannot be guaranteed that other web fonts will be correctly displayed.

How to do it?

Here is a complete list of available web fonts:

  • Verdana

  • Arial

  • Courrier

See the following link for a complete list w3schools.

Use reset.css in the head of the e-mail

To solve some display problems on some mail clients and allow a better display on mobile clients, the following css elements should be inserted.

How to do it?

Add this code in a style tag in head.

Example
<head>
<style type="text/css">
. ReadMsgBody {width: 100%;}
. ExternalClass {width: 100%;}
body {-webkit-text-size-adjust: none;-ms-text-size-adjust: none;}
</style>
</head>

Defining of the e-mail width

Ideally, the email width should be between 550 and 730px so that it's correctly displayed in most mail clients and browsers.

Test your e-mail

The best way to validate that your email works properly is to test it in several tools such as litmus.com or e-mail on acid.

How to do it?

Both tools have a limited free version and the basic monthly subscription is not very expensive.