Email HTML

Owned by Krzysztof Bogdan (Unlicensed)
Last updated: Jul 03, 2023 by Parsa Shiva
7 min read

The basics

HTML (HyperText Markup Language) is markup language for documents that are meant to be displayed in a web browser. HTML sends an information to a web browser how specific elements of a web page are displayed on a computer screen. The information in conveyed, through HTML tags, attributes, and values.

HTML can also be used to stylise emails that are sent the same way a web page is stylised. There are some limitations to what tags and attributes can be used in an email.

HTML tag structure

HTML tags follow basic structure:

  • opening tag: <tag>

  • closing tag: </tag>

example:

<tag>content</tag>.

Tags can have added attributes to them like this:

<tag attribute="value">content</tag>,

example:

<a href="https://contract-signatures.com">this is a link</a>.

Some tags may more than one attribute, for example:

<img src="pictures/image.png" alt="example image" />.

 

Learn more about tags and their attributes here

Limitations

In order to maintain a safe environment and protect against potential vulnerabilities such as cross-site scripting (XSS) attacks or the risk of being flagged for sending spam-like or malicious content, we have implemented a whitelist system for HTML elements.

This means that only specific HTML tags are allowed within our communication framework. These tags have been carefully selected to ensure both the security of our platform and the reliability of our messages.

As previously mentioned, for safety reasons, there are limitations to how emails can be formatted.
The limitations are listed below:

Width should be restricted to 600px.

Background image is not allowed.

Allowed HTML tags:

<a>, <b>, <blockquote>, <br>, <caption>, <cite>, <code>, <col>, <colgroup>, <dd>, <div>, <dl>, <dt>, <em>, <h1> to <h6>, <i>, <img>, <li>, <ol>, <p>, <pre>, <q>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>, <u>, <ul>,

Attributes allowed for a tag:

HTML tag

Allowed attributes

HTML tag

Allowed attributes

<a>

href, title

<blockquote>

cite

<col>

span, width

<colgroup>

span, width

<img>

align, alt, height, src, title, width

<ol>

start, type

<q>

cite

<table>

summary, width

<td>

abbr, axis, colspan, rowspan, width

<th>

abbr, axis, colspan, rowspan, scope, width

<ul>

type

Protocols allowed for specific attributes:

HTML Tag/Attribute

Allowed protocols

HTML Tag/Attribute

Allowed protocols

<a href>

ftp, http, https, mailto

<blockquote cite>

http, https

<cite cite>

http, https

<img src>

http, https

<q cite>

http, https

Email formatting

Text styling

Use tags below to style text in a certain way:

Tag effect

Tag usage

Tag effect

Tag usage

bold text

<b>Bold text</b>

important text

<strong>Strong text</strong>

italic text

<i>Italic text</i>

emphasized text

<em>Emphasized text</em>

striketrough text

<strike>striketrough text</strike>

superscripttext

<p>superscript<sup>text</sup></p>

subscripttext

<p>subscript<sub>text</sub></p>

small text

<small>small text</small>

h1 text

<h1>h1 text</h1>

h2 text

<h2>h2 text</h2>

h3 text

<h3>h3 text</h3>

h4 text

<h4>h4 text</h4>

h5 text

<h5>h5 text</h5>

h6 text

<h6>h6 text</h6>

cited text

<cite>cited text</cite>

“quoted text”

<q>quouted text</q>

text link

<a href="https://www.w3schools.com/tags/tag_a.asp">text link</a>

code text

<code>code text</code>

Text formatting

Text paragraph

The <p> tag defines paragraph, web browsers automatically add a single blank line before and after
each <p> element.

<p> This example text contains few lines in the source code, but the browser displays it as a singe line. </p>

Will be displayed as:

This example text contains few lines in the source code, but the browser displays it as a single line.

Line break

The <br> tag inserts a single line break, it is useful to split text in a controlled manner.

<p> This example paragraph <br> contains few lines of text <br> in the source code, <br> this time, line break was used <br> so it displays in separate lines. </p>

Will be displayed as:

This example paragraph
contains few lines of text
in the source code,
this time, line break was used
so it displays in separate lines.

Preformatted text

Text in a <pre> element is displayed in a fixed-width font. The text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

<p> <pre> This example text contains few lines in the source code, but the browser displays it as a singe line. </pre> </p>

Will be displayed as:

This example text
contains few lines
in the source code,
but the browser displays it
as a single line.

Quoted section

The <blockquote> tag specifies a section that is quoted from another source. Browsers usually indent <blockquote> elements. The cite attribute specifies the source of the quotation.

Will be displayed as:

This is just a paragraph

This proposal concerns the management of general information about
accelerators and experiments at CERN. It discusses the problems of loss of information
about complex evolving systems and derives a solution based on a distributed hypertext system.

This is text written without using any tags

Lists:

Ordered list:

  • Item number 1

  • Item number 2

  • Item number 3

 

Numbered List:

  1. Item number 1

  2. Item number 2

  3. Item number 3

Lists HTML representation:

Description list:

Orange
Round orange fruit
Cucumber
Long oblong green vegetable

Description list HTML representation:

Images

Some email clients disable displaying images by default. If email is mainly composed out of images, these clients will turn them into a lot of empty space with occasional text.

If an image is used as a button, it may cause problems to the email receiver, especially if the button is a link or directs to an important page.

Images blocked by an email client

Image with a link without alt text
Image with a link with alt text

Images allowed by an email client

Another significant thing when adding an image is to provide an alt text. This will help avoid confusion if the image is blocked or not properly displayed. Here are some things to consider while adding the alt text:

  • all images should include the alt attribute

  • alternative text should inform about the content and function of an image

  • alternative text should not be redundant

  • alternative text depends on the context provided by the content surrounding an image

  • decorative images should use an empty alt attribute

Email structure

Tables can be used as an addition to an email or as a main structure where all the content regarding receiver, text, links etc. will be placed. Table structure is quite simple, yet sometimes confusing, especially when it comes to merging cells. Here is a resource that will help create tables: table creator.

Below simple example of 3 by 3 table with head row.

Table:

Title 1

Title 2

Title 3

Title 1

Title 2

Title 3

abc

xyz

jkl

mno

opr

uwx

Table HTML representation:

Email structure – source code

Tags such as div and/or span may help tidy up readability of source code of an email. They act as divisions or section in HTML. These tags can contain any type of content, and are a useful tool to make navigation of a source code easier and faster.

Default email template

Default email look is a result of testing readability and deliverability to different email service providers.

It may sound like a simple task, but there are lots of things to consider, especially with the amount of available email clients.

The goal was to make email simple yet full comprehensive. All the most important information were compressed into this template.