Home > Developer > JavaScript
Html Email guide for writing html pages and email Guide
Preface
We should all know that the html of emails is usually formatted with tables. Why? The reason is that most mail clients (such as Outlook and Gmail) filter HTML settings to make the mail completely unrecognizable.
After many Email writing practices and Du Niang's guidance, I found that the best way to write HTML Email is to use the webpage Creation Method 15 years ago.
Below are some html email writing rules
Key rules
1. Doctype
Currently, the most compatible Doctype is XHTML 1.0 Strict. In fact, Gmail and Hotmail will delete your Doctype and replace it with the following Doctype (HTML5 syntax is unavailable)
1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 22. Layout
The layout page must use a table ). First, place a large table on the outermost layer to set the background. The specific content is embedded in the table (div, p, etc. or don't think about it ).
1 <body style="margin: 0; padding: 0;">2 <table border="1" cellpadding="0" cellspacing="0" width="100%">3 <tr> 4 <td> Hello! </td>5 </tr>6 </table>7 </body>3. Images
Images are the only external resources that can be referenced. Other external resources, such as style sheet files, font files, and video files, cannot be referenced.
Some clients add borders to the image link to remove borders.
Note that many clients do not display images (such as Gmail) by default, so make sure that the main content can be read even if there are no images.
1
4. Intra-row style
It is recommended that all CSS rules adopt the intra-row style. The style placed in the webpage header may be deleted by the client. For more information about the client's support for CSS rules, see here.
In addition, do not use the simplified CSS format, which is not supported by some clients. For example, do not write as follows:
<p style="font: 8px/14px Arial, sans-serif;"></p>Write it like this
1 <p style = "font-size: 8px; font-family: Arial, sans-serif;"> </p>
5. W3C checksum Test Tool
Ensure that the final code can pass W3C verification because some clients will strip off the unqualified attributes. You can also use test tools (1, 2, 3) to view the results displayed on different clients.
Do not forget that the MIME type cannot be used when you send an HTML Email.
1 Content-Type: text/plain;
To use
1 Content-Type: Multipart/Alternative;
6. Template
Using templates already made by others is a good choice (here and here). You can find more on the Internet.
For more information, see HTML Email Boilerplate and Emailology.
Global rules
1. Set the page width to 550 to pixel PX.
2. Use a table for layout.
3. If you want to display emails in the center, set align = "center" in the table ".
4. Do not write the <style> label or class. All CSS uses the style attribute. Use the style to write inline CSS for any element.
5. Do not use css styles of external links to define text and images (css styles of external links cannot be read in emails, so the emails sent out are not linked to styles, will cause the style of your email content to be lost.) the correct syntax is as follows: <td style = "font-family: arial; font-size: 12px; color: black "> text </td>.
6. Do not use flash, java, javascript, frames, iframe, activeX, or DHTML. If the images on the page must be dynamic, convert the flash file to gif animation, however, in outlook2007, gif cannot be displayed normally, because outlook2007 restricts gif animation.
7. Do not use tags such as body, meta, and html other than <table> </table>. Some mailbox systems will filter these tags out.
8. The background image code is written as follows: <table background = "background.gif" cellspacing = "0" cellpadding = "0"> </table>, outlook does not recognize background images.
9. The font-family attribute cannot be blank; otherwise, it will be blocked as spam by QQ.
10. If there is a blank gap between the sides or up and down of the mail template, do not use padding. You must use standard td to set the blank gap. Otherwise, resolution of each mailbox may be different.
11. Note for defining line-height in yahoo Mail: line-height must be defined in block-level elements. If there is a p tag in td, line-height must also be defined in p. Whether it is td or p, if there is a hyperlink, line-height must be defined in the tag. If line-height is defined in td or p, yahoo Mail cannot identify the Row height in.
12. Use less float, margin, and padding. Absolute positioning is unavailable. Use <table style = "clear: both"> </table>
13. if there is an interval between td and td, use <td style = "border-bottom: 10px solid # fff"> </td>. In this way, there is no interval between td and td. <Td style = "margin-bottom: 10px"> </td> does not contain spaces. If there is a gap between td, it must be separated by <td> </td> <td height = "10px"> & nbsp; </td>. If it is a table, <table style = "border-top: 10px solid # ffffff; border-bottom: 20px solid # ffffff "> </table>.
14. if you use less images, the mailbox will not filter your img tags, but the system will usually not load images from unfamiliar emails by default. If you use emails with many images, when the images are not loaded, ugly or even invisible, users who are impatient can simply delete them. Make sure that alt is added to the image.
Outlook rules
1. The setting of margin in <td> is invalid, and neither of them is effective, including margin-left, margin-right, margin-top, or margin-boottom.
2. If you want to use the <P> label, consider the Row Height between the upper and lower rows of the <P> label itself.
Yahoo rules
1. Set align = "center" in the table to be centered. inline style = "margin: 0 auto, width: XX" is required"
Foxmail rules
1. Margin: 0 for all p tags in foxmail; Set margin when using p tags
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
