Email - HTML (email as a web page)

1 - About

Email body are mostly written in HTML for advanced format and design of document that goes from marketing document to conventional letter

An HTML email:

The HTML emails sends programmatically:

There is also engine that does all of that at once.

3 - Example

From amazon:

<div class="container" >
<img src="" width="600" border="0" tabindex="0">
<h2 style="font-size:25px;font-family:Helvetica,Arial,sans-serif;color:#333333;line-height:30px;text-align:center" align="center">
Enter a short headline summarizing why this email is important
<p style="font-size:16px;font-family:Helvetica,Arial,sans-serif;color:#333333;line-height:24px" >This sentence has five words. Here are five more words. Five-word sentences are fine. But several together become monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. The ear demands some variety.</p>

<p style="font-size:16px;font-family:Helvetica,Arial,sans-serif;color:#333333;line-height:24px">
Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasant rhythm, a lilt, a harmony. I use short sentences. And I use sentences of medium length.

<p style="font-size:16px;font-family:Helvetica,Arial,sans-serif;color:#333333;line-height:24px">
And sometimes, when I am certain the reader is rested, I will engage him with a sentence of considerable length, a sentence that burns with energy and builds with all the impetus of a crescendo, the roll of the drums, the crash of the cymbal sounds that say listen to this, it is important.

<p style="font-size:16px;font-family:Helvetica,Arial,sans-serif;color:#333333;line-height:24px">
So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. Don't just write words. Write music.
<button type="button" class="btn btn-secondary" style="background-color:#232f3e;font-family:Helvetica,Arial,sans-serif;color:#ffffff;border:1px solid #232f3e;font-size:16px;font-weight:400;text-align:center;vertical-align:top;padding:16px 25px;line-height:22px;border-radius:0px">
Enter a compelling CTA. i.e., NOT "click here" »

Text written by Gary Provost if we believe this page

4 - HTML

4.1 - Supported HTML

A well written HTML document is accepted nowadays in every modern email client (Gmail, ..) but not every tag is still supported. HTML and CSS tag supports by client can be found at caniemail

4.2 - Metadata

You can add structured data such as reservation, meeting.

4.3 - Best Practice

Best practices:

  • 600-800 pixels maximum width
  • basic font (Arial, Verdana, Georgia, and Times New Roman)
  • image (no svg support)
  • layout is almost done only with the table tag

More … see the design best practices at stackoverflow

4.4 - Inline CSS

Because old email client may strip out the head and style tags from HTML emails, a process called inlineCss or premailer is generally executed in order to get all style inline.

Therefore there is always a pre-processing on HTML for email that will inline the CSS style.

Inline Library:

4.5 - Template

An email template is a HTML template where variable (such as name, place, order, ..) are replaced with data before sending the email to create the the body of the email message.

For transactional email:

For batch email (marketing,..):

See also by categories


4.6 - Editor

Email editor are editor that target the HTML for the Email client.


4.7 - Engine

An engine is an application that takes as input:


5 - Design Guide

6 - Documentation / Reference

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap