Home > Article > Web Front-end > Html Email email html page writing guide
Html Email email html page writing guide
- 高洛峰Original
- 2017-02-16 13:47:512779browse
Preface
Those who have written HTML for emails should all know that the HTML for emails is generally laid out using tables. Why? The reason is that most email clients (such as Outlook and Gmail) filter HTML settings, making emails unrecognizable.
After many emails writing practices and Du Niang’s guidance, I found that the trick to writing HTML emails is to use the web page production method from 15 years ago.
The following are some rules for writing html emails
Partial focus 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 cannot be used)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="http://www.w3.org/1999/xhtml">3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />5 <title>HTML Email编写指南</title>6 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>7 </head>8 </html>
2. Layout
The layout of the web page must use a table. First, place a large outermost table to set the background, and then nest the table inside for the specific content (don’t think about p, p, etc.).
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. Pictures
Pictures are the only external resources that can be cited. Other external resources, such as style sheet files, font files, video files, etc., cannot be quoted.
Some clients will add borders to image links, and the borders need to be removed.
It should be noted that many clients do not display images by default (such as Gmail), so make sure that the main content can be read even without images.
1
4. Inline style
It is best to use inline style for all CSS rules. Because the styles placed in the head of the web page are likely to be deleted by the client. For client support for CSS rules, please see here.
In addition, do not use the abbreviation form of CSS, some clients do not support it. For example, don’t write it like this:
<p style="font: 8px/14px Arial, sans-serif;"></p>
Write it like this
1
5. W3C checksum testing tool
To ensure that the final code can pass W3C verification, because Some clients will strip unqualified attributes. Also use the test tools (1, 2, 3) to check the display results on different clients.
When sending HTML Email, don’t forget that the MIME type cannot be used
1 Content-Type: text/plain;
To use
1 Content- Type: Multipart/Alternative;
6. Template
Using templates that others have already made is a good choice (here and here), and you can find more online.
If you develop it yourself, you can refer to HTML Email Boilerplate and Emailology.
Global Rules
1. Please set the page width within 550 to 650px.
2. Use table table for layout.
3. If you need the email to be displayed in the center, please set align="center" in the table.
4. Don’t write the