Skip to main content

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

 

Back to top