This article is the first in a series on the use of HTML for emails marketing. Today we will see the basics and the syntax of HTML.

Although Cyberimpact allows you to create spectacular emails without writing even a single line of code, to know the basics of HTML is an asset that can help you better understand and control the look of your emails.

Disclaimer: This article is rather long and can be considered a bit technical. However, it contains solutions to many common problems. Feel free to save it and come back if you have difficulties with your model!

Summary:

  • HTML 101 – the basics (you are here!)
  • HTML 101 – text formatting
  • HTML 101 – images

The basic: HTML 4.01

Before you begin: coding standards for HTML emails are different from those used for websites. In fact, the software emails have their own interpreter and HTML do not support all the latest specifications. Therefore we need to code for the lowest common denominator and use technologies of the past to ensure the best possible compatibility.

General Rules:

  • Create the layout using tables
  • Apply styles directy on the elements
    (no stylesheets)
  • Avoid background images
  • Test often, test everything and test everywhere before you send

The HTML syntax

Here’s an example of HTML code:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="370">
<h1 style="font-family:Arial; font-size: 17px; margin-top: 0; margin-bottom: 4px; font-weight:bold; color:#010101;">Consectetuer adipiscing</h1>
<p style="margin-top: 0; margin-bottom: 10px;">Lorem ipsum dolor sit amet...</p>
</td>
<td valign="top" width="18">&nbsp;</td>
<td valign="top" width="176">
<a href="http://www.cyberimpact.com"><img src="/images/base-templates/placeholder176x141.gif" alt="" border="0" width="176" height="141" /></a>
</td>
</tr>
</table>

Explanation:

<table> is a tag. It indicates the beginning of an element (in this case, a table). The closing tag </ table> is used to indicate the end of the table.

width=100% is an attribute applying a value to a property. Most tags can have many attributes..

style=… is an attribute a bit special: it allows you to apply more advanced graphics properties to the element. These properties belong to the CSS language, whose only purpose is for styling elements.

References:

HTML : http://www.w3schools.com/html/default.asp
CSS : http://www.w3schools.com/css/default.asp

Where to apply styles?

In an HTML email, it is best to code directly on the elements for the best possible control over the visual.

Technical explanation:

In most email software, external stylesheets are ignored or even removed from the code at display time. Same for <style>, which outlaws the use of CSS classes.

Several software do not understand either the cascade principle. For example, if you declare a property on a table containing all of your layout, it will not be applied to nested tables inside it!

Finally, email software often have their own stylesheet which can occasionally interfere with yours. For example, on Outlook.com the h1 will be displayed in Calibri unless you specify otherwise. And Hotmail colors all the titles in green by default …

By coding properties directly on the cell which contains the text or on the text itself, you make sure that your styles are the latest to be applied, overwriting any other.

Real-world example: change the color of a link

In the code below:

<p style="margin-top: 0; margin-bottom: 10px;">Lorem ipsum dolor sit amet, <a href="http://www.cyberimpact.com">consectetuer adipiscing</a> elit. Aenean commodo ligula eget dolor. Aenean massa. </p>

The link is the <a> tag. To change its color, we need to add the following:

<a href="http://www.cyberimpact.com" style="color:red;">consectetuer adipiscing</a>

The style attribute allows us to apply css styles. The color property represents the font color. The value of this property can be defined by a keywords (eg, red), in hexadecimal (# FF0000) or as a RGB code (rgb (255,0,0)).

List of web colors and codes: http://en.wikipedia.org/wiki/Web_colors

The last word

Of course, this introduction merely fly over the subject: the code behind an email is much longer and studded by details and technical singularities than our examples above.

If you are curious for more, the second article in this series offer tips and tricks most often used to adjust the formatting of text in your HTML emails.

The Cyberimpact team