HTML Coding Tips for Email

Coding HTML for email might sound easy, but there are a lot of industry best practices that you might want to know before you begin.

General

• Do not use <div> tags
• Do not use <p> tags
• Do not use padding anywhere
• All content must be tabled
• Do not use javascripting
• Do not rely on any content in the <header>
• Do not use external style sheets, or styling in the header
• Use spacer images to define blank space, or where possible slice the white space into the images
• Do not use border attribute – if you need a 1px border is must be created by nesting  a centered table inside another table that is 2px wider, that has a background of the border you want.  The top and bottom parts of the border must be created using images.
• Avoid rowspan, and use colspans sparingly.

Text

• All text must be wrapped in a <span> that defines the color, font-family, font-size and font-weight (if bold)
• Do not rely on font styling put into the header, table or td
• Text alignment must be defined in the td
• Text should be either arial or verdana
• Avoid use of lists (either <ul> or <ol>).  Instead use bullets, either text or images.  Ideally table the bullet and text in separate <td>s
• Text  size should not be less than 11px

Images

• Define height and width of all images
• Image "display" should always be defined (block or inline)
• Images with text should ALWAYS have alt tags
• Do not rely on aligned images.  Always place the content in a table and align left or right
• White space should be sliced into the images (rather than relying on spacer images)
• No image (including spacer images) should have a height or width of less than 5px
• Do not use image maps

Links

• All links but mailtos should be targeted to a blank  or new page
• Link color and text-decoration (if not underlined) should be defined in the <a> tag, and again in a <span> tag inside the <a> that wraps the linked text