Html Email email html page writing guide

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)

<p></p>

1 nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 3 　4 　　<meta>5 　　<title>HTML Email编写指南</title>6 　　<meta>7 　8 

<p></p>

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.).

<p></p>

1 2 　

3 　　 4 　　　5 　　6 　

 Hello! 

7 <p></p>

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></p>

<p></p>

<p></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

For more Html Email email html page writing guide related articles, please pay attention to the PHP Chinese website!