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:
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.
There are two ways you can make HTML email templates:
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.
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:
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.
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.
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:
Alternatively, you can write your HTML code directly in an email editor like Selzy.
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.
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 →”.
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.
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.
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).
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.
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:
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:
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 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 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 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 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.
Want to make your HTML email template design even better? Follow these recommendations:
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:
