Build an HTML Email Template From Scratch

8 min readMay 27, 2021

Contact me for your FOR YOUR PROFESSIOANAL SALES FUNNEL, CLICKFUNNEL AND LANDING PAGE BUILDING >>> https://bit.ly/34e40ER

The best way to understand any process is to carry it out yourself, from the ground up. Today, we’re going to do just that with email design, by building an HTML email template from scratch.

You can design your html email template through fiverr by following this link https://www.fiverr.com/share/Vzk4gdcccv

“The sooner you stop fighting the quirks of email, the sooner you can use them to your advantage.” — Caity G. O’Connor

Editor’s note: this tutorial was originally written by Nicole way back in June 2013. Since then it’s become the go-to reference for industry leaders all over the world, and has been used by millions of beginners as a starting point for their adventures with HTML email templates. We’ve kept it updated so it’s as relevant today as it was when it was first published.

Popular HTML Email Templates on Envato Elements

If you’re looking for a ready-made, professional solution, grab one of our popular HTML email templates on Envato Elements. We have hundreds of responsive options all included with your Elements membership, with easy-to-customize features to get you started.

Get 1 Month Free!

For a limited time, your first month on Envato Elements is free. So you can spend 30 days downloading as many email templates as you want, without paying a cent. Plus you can download stock images, fonts, graphics, and other professional design resources to make your mail newsletters look awesome. You only pay if you decide to continue past the first month.

To make sure you get your 30-day free trial, you’ll need to sign up using this special link or enter the following code on the sign-up page:

elements_cont_tuts-freemonth1-6hs4s4

Not what you’re looking for? No problem, this tutorial will teach you how to build your own!

The HTML Email Template We’re Building

Here’s the HTML email we’ll be building, feel free to fork the pen and use it yourself. Bear in mind that when we’re viewing this template through a web browser we’re much less likely to run into problems than with email clients.

1. Begin Your HTML Email Document

To begin with, it’s worth mentioning where I pulled some of the resources from.

The lovely 2D icons are by Justicon on Envato Elements
The social media icons are from Metrize Icons

Now, as we discussed in the previous tutorial, you’ll need to begin your HTML email template with an XHTML doctype, and the correct language for your subscribers, i.e. <html lang="en-GB">:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Demystifying Email Design</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

</html>

With that sorted, we can commence building the rest of the structure.

2. Create the Body and Main Table

First, we’ll add an overall structure for our email, starting with a <body> tag. We’ll set the margin and padding on the body tag to zero to avoid any unexpected space.

We’ll also add a table with a width of 100%. This acts as a true body tag for our email, because styling of the body tag isn’t fully supported. If you wanted to add a background colour to the ‘body’ of your email, you’ll need to apply it to this big table instead.

Then we’ll add role="presentation" to the table. This makes it more accessible, as it tells screen readers to treat it as a visual table, not a data table.

Set your cellpadding and cellspacing to zero to avoid any unexpected space in the table.

Note: We’re going to leave border="1" on all of our tables, so that we can see the skeleton of our layout as we go. We’ll remove them at the end with a simple ‘Find & Replace’.

<body style="margin: 0; padding: 0;">

<table role="presentation" border="1" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td>

<p style="margin: 0;">Hello!</p>

</td>

</tr>

</table>

</body>