Coding html for email templates

Build an HTML Email Template From Scratch

Nicole Merlin Last updated May 24, 2023

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 a simple HTML email template from scratch.

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.

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

Jump to sections in this tutorial:

1. Begin Your HTML Email Document

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

Now, as we discussed in the previous tutorial, you’ll need to begin your HTML email template with an HTML doctype, and the correct language for your subscribers. In this case we are going to use the HTML5 doctype, set our language to English with , and also include the XML and Microsoft Office namespaces (the xmlns bits). We are going to need these a few lines down, as I’ll explain.

 lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"> 

 name="viewport" content="width=device-width,initial-scale=1"> 

 name="x-apple-disable-message-reformatting"> 

table, td, div, h1, p font-family: Arial, sans-serif;> 

table, td border:2px solid #000000 !important;> 

There are quite a few things in the code above, but it’s the bare minimum you need to ensure your final email renders beautifully everywhere.

Firstly, we have a few meta tags to ensure the right text encoding, viewport scaling across different mobile devices, and one to stop Apple from adjusting the size in a strange way in their mail apps.

Underneath the tag you’ll see some code between