Skip to main content

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.

When the user clicks in the links of your email, it's interesting to open the link in a new window. In this way, when the user closes the window, they will still be in your email.

How do you do it?

Add the attribute target="_blank" on your tag <a href="#"/>

Example:

<a href="http://www.actito.net" target=”_blank”>actito.net</a>

The default color for a link is blue web. But you can of course change this colour.

How to do it?

Add the attribute style="" on your <a href="#" /> tag with the 'color' property Add <span> on both sides of the text link (some email clients overwrite the usual color properties of a link but it is not the case with <span>).

Example

<a target="_blank" href="http://www.actito.net" style="color:#336699">
    <span style="color: #336699"> actito.net </ span>
</a>

View an explication when hovering the link with the mouse cursor.

How to do it?

Add the title attribute on your beacon with explanatory text. This will also be used to pre-populate the tracking information to the Actito level.

Example

<a target="_blank" href="http://www.actito.net" title="My link description">
    <span style="color: #336699"> actito.net </ span>
</a>

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

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

Example

<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 é 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.