Summary of principles for writing HTML pages for email messages_HTML/Xhtml_Web page production

Since the HTML email is not an independent HOST page on this site, it is hosted on others. So writing HTML emails is very different from writing HTML pages. Because all mainstream mailboxes for netizens will more or less filter the HTML emails they receive in the background. There is no doubt that JS code is strictly filtered out, including all event listening attributes, such as onclick and onmouseover. This is based on email security considerations. Not only that, CSS code will also be partially filtered. What I want to talk about is how to write HTML emails that are not filtered by major mainstream mailboxes and can be displayed normally.

First, let’s take a look at how the mailbox displays HTML emails. I have never worked on an email system myself, and the filtering algorithms in the background of major mailboxes are not easy for outsiders to know. Therefore, we can only use front-end display to infer which writing methods are accepted by the mailbox and which ones will be filtered out. Through the analysis of gmail, hotmail, 163, sohu, and sina, I divided the mailboxes into two categories:

The first category includes gmail, hotmail, and sohu. For this type of mailbox, the email content is laid out in a certain div in the entire mailbox page. As shown in the picture:

The second category includes 163 and sina. In this type of mailbox, the email content is laid out in a separate iframe. As shown in the picture:

Friends who are familiar with HTML know that iframe content is an independent document and is independent of the elements and CSS of the parent page. It can almost be treated as an independent page. And if the email content is in a div, then the email content is an integral part of the entire mailbox page. Obviously, mailboxes that use iframe as a presentation method will be much more tolerant of email content, because it gives you a sufficiently independent space for expression. The div is not so polite. Just imagine, if you write this CSS sentence in your email, will the font size on the entire email display page become 20px and it will be messed up:

We need to write a unified email template that is compatible with each mailbox, so we must avoid the above external CSS writing method, and something similar to Styles such as float and position that become abnormal content flows will also be filtered. If you write them, it is likely to affect the performance of the external mailbox.

I will list some writing principles below:
1. One of the global rules, do not write the

2. Global rule two, use less pictures. Your mailbox will not filter your img tags, but the system will often not load pictures from strangers by default. If you use a lot of pictures in the mail, they will not be loaded in the email. In some cases, the content is so ugly that the content cannot be seen clearly, and impatient users delete it directly. Be sure to add alt to the image.

3. Do not write float or position in the style, because it will be filtered. So how to implement left and right layout or more complex layout? Use table.

4. The background color can be set in the style content, but the img will be filtered, which means that the background image cannot be set through CSS. But there is a very interesting element attribute, also called background, in which you can define an image path. This is a good alternative. Although this has limited functions, such as being unable to locate the background image, it is better than nothing. For example, to add a background to a cell, you must write like this:

5. Emails in div mode do not support flash, and those in iframe mode need to be verified.

Finally, sohu’s email address is very weird. It adds a space after each text paragraph, causing the original normal layout to not fit on one line and wrap into new lines, thus causing some layout confusion. Therefore, if you want to be compatible with sohu mailboxes, you must be extra careful when encountering some compact layouts, try to reduce the number of text segments and leave sufficient width.