“A Tag” // href // Link

Make sure the URL has http:// or https://. Include target=”_blank” for the instances where a user has navigated to the “View Online” version of the email.

Underline

<a href="http://tabletrtd.com" target="_blank" style="color:#3182c1; text-decoration:underline;">Structure of an A Tag</a>

No Underline

<a href="http://tabletrtd.com" target="_blank" style="color:#3182c1; text-decoration:none;">Structure of an A Tag</a>

Mailto

<a href="mailto:email@tabletrtd.com" target="_blank" style="color:#3182c1; text-decoration:underline;">This link will launch the mailto option on the User's Computer</a>.

Mailto with Subject Line

<a href="mailto:email@tabletrtd.com?subject=table%20tr%20td%20Loves%20You!" target="_blank" style="color:#3182c1; text-decoration:underline;">This link will launch the mailto option on the User's Computer</a>.

Mailto with Subject Line / CC / BCC

<a href="mailto:email@tabletrtd.com?cc=email@tabletrtd.com&bcc=email@tabletrtd.com&subject=table%20tr%20td%20Loves%20You!" target="_blank" style="color:#3182c1; text-decoration:underline;">This link will launch the mailto option on the User's Computer</a>.

Telephone

<a href="tel:555-555-5555" target="_blank" style="color:#3182c1; text-decoration:underline;">This will launch a Phone Call</a>.

Telephone with Country Code

Note: Telephone Tags do not require a country code, but it is good practice to include it.

<a href="tel:+1-555-555-5555" target="_blank" style="color:#3182c1; text-decoration:underline;">This will launch a Phone Call</a>.

Jump Link

Note: Use an “id” on the <td> and a “name” on the <a> (href) tag. There must be a pound sign (#) before the value name in the href field.

Link
<a href="#JumpLinkSection">Jump To Jump Link Section</a>

Destination
<td align="left" valign="top" id="JumpLinkSection"><a href="http://tabletrtd.com" name="JumpLinkSection">This is the Jump Link Section!</a></td>

Keep Black Link From Turning Blue

Black fonts using Hex Code #000000 that are linked will turn blue in some email clients. Update all #000000 Hex Codes to be #000001, and the Font will remain Black in all email clients.

Image Tag Hacks

Short Image (under 20px high)

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" height="10" style="font-size:0; line-height:10px;"><img src="http://placehold.it/500x10" alt="" width="500" height="10" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Height

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td height="20" align="left" valign="top" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="20" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Height (under 20px high)

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" height="10" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="10" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Width

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="20" align="left" valign="top"><img src="images/spacer.gif" alt="" width="20" height="1" border="0" style="display:block;" /></td>
  </tr>
</table>

Spacer Gif For Full Width (<hr />)

<table bgcolor="#000001" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td height="1" align="left" valign="top" style="font-size:0; line-height:1px;"><img src="images/spacer.gif" alt="" width="1" height="1" border="0" style="display:block;" /></td>
  </tr>
</table>

Disable Download Arrow in Gmail

If that little download arrow is showing up on an image in Gmail, the cause is that your image is either 250px wide or 250px high. The quick fix for this is to toss a link around the image and the little arrow will disappear.

Superscripting Guide

Superscript solutions for all types of requirements.

No Superscript
&reg;

Standard Superscript
<sup>&reg;</sup>

Flexible Superscript
<sup style="font-size:9px; line-height:0;">&reg;</sup>

Bulletproof Superscript
<sup style="font-size:9px; line-height:0;"><!--[if (gte mso 9) | (IE 7)]><span style="font-size: 12px; vertical-align: 3px;"><![endif]-->&reg;<!--[if (gte mso 9) | (IE 7)]></span><![endif]--></sup>

Background Color on Entire Email

Here is the code.

<body bgcolor="#eeeeee" style="margin:0; padding:0; width:100% !important; background-color:#eeeeee;">
<div align="center" style="background-color:#ffffff;">
  Build Email Here
</div>
</body>

Here is the breakdown.

bgcolor=”#eeeeee” on <body>
Works everywhere except:

  • Gmail App on Android
  • AOL Web Clients
  • Gmail Web Clients
  • Google Apps Web Clients
  • Yahoo! Mail Web Clients

style=”background-color:#eeeeee;” on <body>
Works everywhere except:

  • Android 4.4
  • Yahoo! Mail Web Clients

style=”background-color:#eeeeee;” on <div>
Leaves white padding around entire email in:

  • Outlook 2007
  • Outlook 2010
  • Outlook 2013
  • Outlook 2016

Convert High Bit Characters to HTML ASCII Codes

&nbsp; - non-breaking space - Mostly used to "glue" the last two words of a headline or paragraph together to avoid "orphans" or "widows".

&reg; - registered trademark - Also referred to as an "R ball". This character becomes exponentially more difficult to handle when you want to superscript.

&trade; - trademark - This character is already superscripted, and is easy to toss into an email.

&#8212; - m-dash (old-school) - This dash is the width of an "m".

&mdash; - m-dash (new-school) - This dash is the width of an "m".

&#8211; - n-dash (old-school) - This dash is the width of an "n".

&ndash; - n-dash (new-school) - This dash is the width of an "n".

&bull; - bullet - When creating a bulleted list, be sure to use this code instead of the dark circle character.

&#8209; - Non-breaking Hyphen - This character will glue hyphenated items together and treat them as one word. Add this to phone numbers (or any hyphenated words) and they will stop breaking onto two lines.

&ldquo;/&rdquo; - left/right double quote - Replace any quote marks with the corresponding left or right quote mark. First, because a quote mark from a keyboard is HTML code, and can cause rendering issues. Secondly, because of typography. Quotes look better when they are angled left or right.

&lsquo;/&rsquo; - left/right single quote - Replace any apostrophe or single quote marks with the corresponding left or right single quote mark. This is because of typography. Apostrophes and single quote marks look better when they are angled left or right.

&euro; - Euro