HTML email coding best practices quick reference

You can print this quick reference email coding best practices.

General HTML email coding best practices

  • Code your messages with the HTML 4.01 transitional document type definition or lower and declare its use at the beginning of the code. See W3C for details on the 4.01 transitional DTD.
  • Include the DTD definition at the top of your code.
  • Specify character encoding, which is either ISO-8859-1 or UTF-8.
  • Code for multiple screen types.
  • Use CSS3 media queries to provide alternate responsive styles for mobile device rendering.
  • If you include comments, keep them to a single line.
  • Use only inline CSS and limit that to font-related definitions only. Embedded and external CSS is not widely supported and is a common cause of rendering issues.
  • Do not use DIV or SPAN tags for positioning or CSS-based layout. This approach does not work in email.
  • Do not rely on cellpadding, cellspacing, or CSS padding and margins. They are not supported and can cause to rendering issues.
  • Set the background color for an entire message by using a parent table that is 100% wide with a bgcolor value.
  • Replace the following characters with HTML entities or use ASCII equivalents:

    © ® ™ – — … ’ " "

    Note: UTF-8 encoding supports © and ® directly.
  • Do not use EMBED tags.
  • Do not use Flash, JavaScript, or forms.
  • Host all images. Do not attach images.
  • Avoid background images.
  • Include alt tags for all images. For images where alternate text is not relevant, include a blank <alt> tag. For example, <img... alt="">.
  • Before you test or send an email, be sure to validate the code and correct any issues. A good source for validation is W3C Markup Validation Service.
  • Test extensively in as many email clients as possible.

Tables

  • Define <table> and <td> widths.
  • Do not use height definitions for table and table cells.
  • Remove extraneous spacing between table cell content and the closing </td> tag.
  • Where necessary, control spacing with table cells. Do not use CSS margin and padding styles.
  • Provide space for cell content in table layouts that break when cell dimensions are exceeded.
  • Simplify table structures where possible by stacking tables to reduce rowspan and colspan needs.

Images

  • Optimize image file sizes.
  • Define width and height for all images.
  • Include alternate text attributes even if they are blank, which is coded as alt="".

Text-only

  • Use a plain-text-only editor, such as Notepad.
  • Use a combination of white space and formatting visual-aids to make content easy to scan.
  • Use ASCII equivalents for the following characters:

    © ® ™ – — … ’ " "

    Note: UTF-8 encoding supports © and ® directly.
  • Put links on their own lines, not embedded in the text.