How To Make an HTML Email Template Quickly & Easily

How To Make an HTML Email Template Quickly & Easily
28 June, 2024 • ... • 53 views
Diana Kussainova
by Diana Kussainova

As avid email marketing enthusiasts, we can spend hours talking about the channel’s unique features and advantages. But there is one thing not many people discuss — the amount of control email marketers have over their messages’ presentation. With social media, you are limited to what the platform offers, so no clickable images or links in posts (for now?), no changing of the captions’ font, etc. With email, you have the power to transform the campaign in whichever way you can imagine. 

In the already highly customizable world of email marketing, learning how to create an HTML email template is like making pizza dough from scratch instead of using a pizza base. Read this guide to understand why you may need an HTML email template and how to create one step-by-step. We’ll also give you recommendations for software to use.

What is HTML email and when to use it?

HTML (Hypertext Markup Language) is a coding language used to create web pages and emails. Almost any marketing email you have ever received has HTML at its core. HTML is what adds images, design, and formatting to simple text-only messages, also known as plain text emails.

Here is a side-by-side of HTML vs plain text emails:

An HTML email with images, colorful background, hyperlinks, and buttons on the left and a plain-text email with simple text and links on the right
Source: Milled, Really Good Emails

The email on the left is coded with HTML and has images, buttons, colorful backgrounds, and other visually interesting elements. The email on the right is a plain text one and just has links and text and the images are also comprised of symbols. 

As opposed to plain text emails, using HTML templates has a lot of advantages for email marketers. HTML emails are highly customizable and visually appealing. You can create elaborate designs, capture the attention of your customers, and make the whole reading experience more interactive thanks to GIFs.

So, when to use HTML emails? For typical email marketing purposes, we suggest always using HTML emails unless you specifically need a plain text campaign. It’s the industry standard, customers are accustomed to it and expect it while the technology for HTML emails makes it easy to create them even without coding.

Why should I code an HTML email template myself?

There are two ways you can make HTML email templates:

  • Use a visual drag-and-drop builder.
  • Build a template from scratch.

The first option implies using a template builder and working in a visual drag-and-drop editor that doesn’t require you to code. You can customize one of the templates that the software of your choice offers or make a template yourself from start to finish.

Building an HTML template in Selzy’s drag-and-drop editor
In Selzy’s email builder, you can add elements and blocks to an empty template without writing a single string of HTML code

The second option — creating a code for a template yourself — is a bit trickier and requires you to know at least the fundamentals of the HTML language. This is a lengthier process and given the state of email marketing technology, it’s not an absolute necessity for your business. However, coding a template yourself means having full control over every little detail of your campaign, for example:

  • You can make a unique email. If you code a template yourself, you can make something truly unique and surpass a standard template’s capabilities. For example, you can manually add AMP elements and make email templates unique to your business.
  • You can edit the dark mode version of your email. Many email builders include dark mode code snippets to their templates by default, however, if you code an HTML email yourself, you get to fine-tune the standard rendering. This way your campaigns will better suit the devices and apps your customers use to read your emails.
  • You can code your email to look well in different environments. Different email clients may have their own limitations. For example, some still only partially support CSS (Cascading Style Sheets) media queries — code snippets for style customization across devices and apps. Standard HTML code may not look right in those email clients, but you can adjust your own code to overcome these and similar limitations.
  • You can style alt text. Alt text is the image descriptions shown to those who use screen readers or have images turned off in their email clients. People who can see the alt text will enjoy a customized look you can give to it if you code your HTML templates. However, you should know that not every email client supports stylized alt text.

Plus, if you find a bug in an HTML code you found online, you won’t be able to fix it without knowing how to code. You’ll have to resort to the source service’s support, and that can take a lot of precious time. With a template you make, you are the sole person responsible for its quality. 

Last but not least, HTML coding is a transferable skill, so you can not only build email templates but also eventually tackle web development or user interface development for your business.

Excited to make a template that will be uniquely catered to your business? Then continue reading, and we’ll walk you through the process step-by-step. 

How to create an HTML email template from scratch

Let’s now focus on creating a basic HTML email template with a one-column layout. You can build upon this template and further customize it to your needs or business goals.

1. Open a program to edit HTML code

For starters, choose the software you’d like to use to design the email templates. Depending on your preferences, we recommend you use one of these software options:

  • Visual Studio Code (VS Code) — a free and open-source software by Microsoft for Windows, Linux, macOS, and web browsers. 
  • Visual Studio Community — a free software by Microsoft for Windows, Linux, and macOS.
  • Brackets — a free and open-source software created by Adobe for macOS, Windows, and Linux. Since 2021, Adobe no longer supports this software, it is now run by its community.
  • Notepad++ — a free and open-source software editor for Windows.
  • Sublime Text for Windows, Linux, and macOS.

Alternatively, you can write your HTML code directly in an email editor like Selzy.

2. Create the body of the email and the main table

First, let’s create the HTML structure of the email and the main table. In HTML development, tables allow you to organize content pieces into rows and columns, they are basic elements of the email templates.

In the code below, the main table will occupy the whole width of a template. There is also a color set for the email’s background. In our example, it is #F8F8F8 — light gray.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

 

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>New email title</title>

</head>

 

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

<table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%” style=”font-size: 1px; line-height: normal;” bgcolor=”#F8F8F8″>

<tr em=”group”>

<td align=”center”>

<!– Email content goes here –>

</td>

</tr>

</table>

</body>

 

</html>

3. Create the template structure

Now, let’s add another table inside the main one. This new table will act as a container for the main contents of your HTML email template. 

Below, you can see the main table code again, this time with another table added and an empty block inside of it. In the next step, we will add text in the place of “<!– Email content goes here →”. 

<table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%” style=”font-size: 1px; line-height: normal;” bgcolor=”#F8F8F8″>

<tr>

<td align=”center”>

<!–[if (gte mso 9)|(IE)]>

<table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”640″><tr><td>

<![endif]–>

<table cellpadding=”0″ cellspacing=”0″ width=”100%” border=”0″ style=”max-width: 640px; min-width: 640px; width: 640px;” class=”em-narrow-table”>

<tr>

<td>

<!– Email content goes here –>

</td>

</tr>

</table>

<!–[if (gte mso 9)|(IE)]>

</td></tr></table>

<![endif]–>

</td>

</tr>

</table>

4. Make the template responsive

Your email will be viewed on many different devices including mobile phones, so you need to make your design adaptable.

Below is the code you need to add inside the <head> tag to make it so that the content table you added during the previous step will become narrower on mobile.

<style type=”text/css”>

html {

-webkit-text-size-adjust: none;

-ms-text-size-adjust: none;

}

 

@media only screen and (max-device-width:640px),only screen and (max-width:640px) {

.em-narrow-table {

width: 100% !important;

max-width: 640px !important;

min-width: 320px !important;

}

}

</style>

5. Add text

Your basic email design is ready. To add some text, paste the code below into your template, inside the content table. 

The code below regulates the formatting of the text: the font, size, and color as well as the line height. In the example, the text is “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua”. The font is set to Helvetica, Arial, sans-serif, size 16, color #595959 — dark gray. The line height is 24 pixels. 

<table cellpadding=”0″ cellspacing=”0″ width=”100%” border=”0″ style=”max-width: 640px; min-width: 640px; width: 640px;” class=”em-narrow-table”>

<tr>

<td>

<div style=”font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #595959;”>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

</div>

</td>

</tr>

</table>

6. Add an image and a button

Marketing emails often contain images and buttons, so let’s add those elements as well. Below you can see the code with the content table, text, an image, and a button that says “Button”.

The font and text size for the button is the same as for the regular text, but the color is set to white (#FFFFFF) while the button’s background is set to blue (#1890FF).

<table cellpadding=”0″ cellspacing=”0″ width=”100%” border=”0″ style=”max-width: 640px; min-width: 640px; width: 640px;” class=”em-narrow-table”>

<tr>

<td>

<img src=”https://cdn.useblocks.io/1865/230630_18_LNUn9UT.png” width=”640″ border=”0″ alt=”” style=”display: block; width: 100%; max-width: 640px;”>

<div style=”height: 20px; line-height: 20px; font-size: 8px;”>&nbsp;</div>

<div style=”font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #595959;”>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

</div>

<div style=”height: 20px; line-height: 20px; font-size: 8px;”>&nbsp;</div>

<table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”200″>

<tr>

<td align=”center” valign=”middle” height=”41″ style=”background-color: #1890FF; border-radius: 6px; height: 41px;”>

<a href=”” target=”_blank” style=”display: block; height: 41px; font-family: Helvetica, Arial, sans-serif; color: #FFFFFF; font-size: 16px; line-height: 41px; text-decoration: none; white-space: nowrap;”>Button</a>

</td>

</tr>

</table>

</td>

</tr>

</table>

7. Send the email to yourself and see how it looks

Here is the full HTML code we made. You can use it as a base to build upon adding more elements and customizing it. 

To add more elements, you need to insert them into the content table (em-narrow-table) just as the text, image, and button that we already have in the template.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

 

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<title>New email title</title>

<style type=”text/css”>

html {

-webkit-text-size-adjust: none;

-ms-text-size-adjust: none;

}

@media only screen and (max-device-width:640px),only screen and (max-width:640px) {

.em-narrow-table {

width: 100%!important;

max-width: 640px!important;

min-width: 320px!important;

}

.em-mob-padding_right-20 {

padding-right: 20px!important;

}

.em-mob-padding_left-20 {

padding-left: 20px!important;

}

}

</style>

</head>

 

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

<table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”100%” style=”font-size: 1px; line-height: normal;” bgcolor=”#F8F8F8″>

<tr>

<td align=”center” class=”em-mob-padding_right-20 em-mob-padding_left-20″ style=”padding-top: 20px; padding-bottom: 20px;”>

<!–[if (gte mso 9)|(IE)]>

<table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”640″><tr><td>

<![endif]–>

<table cellpadding=”0″ cellspacing=”0″ width=”100%” border=”0″ style=”max-width: 640px; min-width: 640px; width: 640px;” class=”em-narrow-table”>

<tr>

<td>

<img src=”https://cdn.useblocks.io/1865/230630_18_LNUn9UT.png” width=”640″ border=”0″ alt=”” style=”display: block; width: 100%; max-width: 640px;”>

 

<div style=”height: 20px; line-height: 20px; font-size: 8px;”>&nbsp;</div>

 

<div style=”font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #595959;”>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

</div>

 

<div style=”height: 20px; line-height: 20px; font-size: 8px;”>&nbsp;</div>

 

<table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”200″>

<tr>

<td align=”center” valign=”middle” height=”41″ style=”background-color: #1890FF; border-radius: 6px; height: 41px;”>

<a href=”” target=”_blank” style=”display: block; height: 41px; font-family: Helvetica, Arial, sans-serif; color: #FFFFFF; font-size: 16px; line-height: 41px; text-decoration: none; white-space: nowrap;”>

Button

</a>

</td>

</tr>

</table>

</td>

</tr>

</table>

<!–[if (gte mso 9)|(IE)]>

</td></tr></table>

<![endif]–>

</td>

</tr>

</table>

</body>

 

</html>

Once your HTML email template is ready, paste it into an email service provider you like and send a test email to yourself.

In the editor, you can also see the HTML code rendering — the way your email will look to its recipients. Here’s the email we made together as it is displayed in Selzy’s email editor:

Selzy’s email editor with the HTML code on the right and the email displayed on the left
In Selzy’s email builder, you can see the email rendering on the left and its code on the right. The rendering also changes in real time following the changes in the code

To test the email rendering in various environments, you can use Testi@ and similar websites. Here you can see some of the email clients and the way they rendered our HTML email:

The website displays screenshots of what the email looks like on desktop clients like Outlook (2021), Outlook (2013), MacOs Big Sur, and more.

Platforms and tools that allow you to create HTML email templates

If you want to create HTML email templates directly in an email service provider and then easily send them, here are 4 of the best email template builders to explore.

Selzy

Selzy homepage with the heading “The easiest way to start selling with emails”

Selzy prides itself on being one of the easiest email marketing software. It has a user-friendly code editor, so you can create HTML emails from scratch. The editor is adjusted to work best with inline CSS which is one of the best practices of HTML coding for emails. It also suggests options to use for CSS, so you can simply pick what you need from a list without typing. This makes the template creation process faster. The changes you make to the HTML code are reflected in the rendering of the template in real-time.

You can also use Selzy’s drag-and-drop editor to select elements that you need and make a template without coding. After that, you can simply copy the code made by the service automatically and use it for your needs. 

In Selzy’s editor, you can switch between a desktop view and a mobile view to make sure your design looks good no matter the viewing environment. After you are satisfied with the result, you can send test emails.

Pricing: The cheapest plan starts at $5 a month (billed yearly) for 500 subscribers and unlimited emails. You can also try it for free with up to 1,500 emails and up to 100 contacts.

HubSpot

HubSpot homepage with the heading “Grow better with HubSpot”
Source: HubSpot

HubSpot is more than email software, it also has customer and content management, and more. Using this service, you code HTML templates. However, it is mostly suitable for email marketers experienced in HTML development since the process is more complex than in other services.

On the plus side, with HubSpot, you can preview your email in different clients. The software also automatically creates plain text versions of the emails you are sending. This helps your campaign to still be displayed even in those email clients that do not load HTML.

HubSpot also has a drag-and-drop editor you can use to then copy the code and 15+ email templates for newsletters, announcements, etc. 

Pricing: The cheapest plan starts at $15 a month (paid yearly) for up to 1,000 marketing contacts. The free plan allows for 2,000 email sends per month.

AWeber

AWeber homepage with the heading “Connect, automate, and sell your vision to the world”
Source: AWeber

AWeber is an email marketing software that also has landing pages and an e-commerce page builder. You can design HTML email marketing templates in a dedicated editor. The editor shows a preview of the email and also automatically generates a plain-text version of it that users can then change. The editor also supports AMP HTML code that can add interactivity to your email marketing campaigns.

The downside of the editor is that to transfer an HTML email you made to a drag-and-drop editor, you need to contact the support team. At the same time, you can paste HTML code to AWeber’s drag-and-drop editor directly inside the paragraph, article, product, coupon, and signature blocks of a template. 

The drag-and-drop editor offers more than 600 templates for newsletters, events, holidays, and more.

Pricing: The cheapest plan starts at $12.50 a month (paid yearly) for up to 500 subscribers and up to 5,000 emails (10 times the amount of subscribers). The free plan allows for up to 500 subscribers and 3,000 email sends per month.

Stripo

Stripo homepage with the heading “Drag-n-drop and HTML email template builder”
Source: Stripo

Stripo is an email template builder compatible with many email service providers. Like in Selzy, you can switch between the HTML and the drag-and-drop editors in one place. Uniquely to Stripo, though, the code editor is below the email preview and not to the side of it. The code in the editor changes based on whether an element in the template is selected or not. For example, when you select a button in your template, you will only see the HTML code corresponding to it and not the entire email code. You can also highlight a string of code in the code editor to see which element it relates to.

Stripo’s editor caters to those well-versed in web development or design as it also separates the code into three sections: HTML, default CSS, and custom CSS. This can be harder for a beginner to understand or use. 

The drag-and-drop editor has over 1,500 ready-made templates for different industries like agriculture and beauty and occasions like holidays, announcements, and more. 

Pricing: The cheapest plan starts at $15 a month for up to 50 exports and 50 test emails a day. The free plan allows for 4 exports and 5 test emails a day.

Tips for creating HTML email templates

Want to make your HTML email template design even better? Follow these recommendations:

  • Keep learning. Read the best email marketing resources, watch video tutorials, check the code of the emails you like on Really Good Emails, and ask for advice whenever possible. Coding and web development are complex subjects, and learning from others’ experiences can help you progress faster.
  • Experiment. If you’re using an email marketing service or a template builder that combines HTML and drag-and-drop modes, add premade elements you want to use to a template and check their code. In Selzy’s template builder, for example, all the blocks have been coded according to the best practices of HTML email design, so you can see examples of well-structured and coded buttons, text blocks, etc.
  • Always test your email templates in real inboxes. The way your email template looks in a web browser can be completely different from what your subscribers will end up receiving. That’s why you need to send test emails to real inboxes (preferably, to as many different clients as possible) or use dedicated testing services like Litmus or EmailOnAcid.

Conclusion

Coding HTML emails from scratch can help you design bespoke campaigns and gain full control over their look and functionality. 

To make a basic HTML structure for your email template, follow these steps:

  1. Open an application to edit HTML code.
  2. Create the body of the email and the main table.
  3. Create the template structure.
  4. Make the template responsive.
  5. Add text.
  6. Add an image and a button.
  7. Send the email to yourself.
28 June, 2024
Article by
Diana Kussainova
Writer, editor, and a nomad. Creating structured, approachable texts and helping others make their copies clearer. Learning and growing along the way. Interested in digital communications, UX writing, design. Can be spotted either in a bookshop, a local coffee place, or at Sephora. Otherwise probably traveling. Or moving yet again.
Visit Diana's

Latest Articles

Selzy Selzy Selzy Selzy