HTML Coding Tips for Email
Modified on: Tue, 8 Nov, 2016 at 10:47 AM
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.
- Do not use <div> tags
- Do not use <p> tags
- Do not use padding anywhere
- All content must be tabled
- 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.
- 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
- 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
- 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
Did you find it helpful?
Sorry we couldn't be helpful. Help us improve this article with your feedback.