how to create html email template

The Simple Guide to Creating an HTML Email [+ Free Templates]

Published: August 24, 2023

When you create an email using a drag-and-drop or module-based tool, you're actually generating an HTML email.

There are two main types of email you can send and receive: plain text emails (these are exactly what they sound like — any email that contains just plain old text with no formatting) and HTML emails, which are formatted and styled using HTML and inline CSS .

HTML emails are easy to spot — most of the styled, multimedia marketing emails in your inbox are HTML emails.

As a marketer, you've probably compared HTML emails versus plain-text emails and realized that there are different benefits to each type. HTML emails aren't inherently better than plain text emails, and in different situations, both types can be part of a successful email marketing program.

Here’s what an HTML looks like on the front-end. Click on the HTML button to see the code behind it.

See the Pen HTML Email Template from HubSpot by Christina Perricone ( @hubspot ) on CodePen .

In this article, we'll cover how you can get started creating HTML emails, regardless of your experience level and comfort with coding, and share some free templates you can use. Let's dive in.

How to Create an HTML Email

Good news: You actually don’t need to know how to code to create an HTML email.

Most tools that create and send email (like HubSpot ) will offer pre-formatted, ready-to-go HTML templates that enable you to design emails without ever needing to access the actual code on the back-end.

As you make changes in the email editor, those changes will be automatically coded into the final product. Email building tools like this are an ideal option if you don't have an email designer on your team, but you still want to send professional-looking marketing emails.

Pro tip: Need help with the content of your email? HubSpot's Campaign Assistant can create a customized first draft in just a few clicks— so you can get back to the fun part.

Still want to create an HTML email from scratch?

If you're comfortable with HTML and want more direct control over the code of your emails, most email tools will allow you to import HTML files directly for use as custom email templates.

There are a wide variety of free HTML email templates available on the web (some of which we'll share below), and if you know your way around an HTML file, it's usually quite straightforward to adapt the template to the email building tool of your choice.

To create an HTML email completely from scratch, you'll need to have an advanced knowledge of HTML (or work with a developer who does). This guide offers a solid overview of coding a basic HTML email. Because the process of creating an HTML email from scratch can be quite involved, we recommend working with a developer or using a pre-made HTML email template instead.

Developing an HTML email specifically for HubSpot?

If you're developing an HTML email template specifically for use in HubSpot, you'll want to make sure you include the required HubL tokens (these ensure your emails can be customized and are compliant with CAN-SPAM laws). You can find a complete guide to coding HubSpot-specific HTML email templates here . Or alternatively, just use our simple what-you-see-is-what-you-get email editor .

HTML Email Best Practices

• Make sure your HTML email is responsive for different screen sizes and devices.
• Make sure your styling works in different email clients.
• Be conscious of how long your HTML emails take to load.
• Plan (as much as you can) for end-user inconsistencies.
• Conduct thorough testing.

Now that you understand the basics of what goes into developing an HTML email, let's go over a few important best practices you should keep in mind. No matter what method you plan to use to create HTML emails, these best practices will help improve the design, user experience, and deliverability of your emails.

1. Make sure your HTML email is responsive for different screen sizes and devices.

The way your email looks in a user's inbox depends on a wide variety of different factors.

One of the biggest and most obvious factors is the screen size of the device it's being viewed on. An email that looks amazing and well-formatted on a desktop can easily devolve into a tangle of illegible, overlapping text and images when viewed on a smartphone screen.

To ensure your HTML emails look the way you intended across a wide spectrum of screen sizes, the best thing you can do is keep your layout simple and straightforward. When you start adding more complex elements like multiple columns and floated images, it becomes more difficult to translate the format of your email for different screen sizes.

If you do decide to develop a more complex layout, make sure you're actively solving for how the elements will be rearranged to suit different screen sizes. For example, if your email displays as multi-column on desktop, that same structure won't fly on mobile — you'll need to use media queries to define how elements will be displayed on different screen sizes.

Remember, developing truly responsive HTML emails goes beyond the structure and format of your message. Think about how the overall user experience of your email will be perceived on different devices. Make sure your font choices are just as legible on mobile as they are on desktop, and use mobile-friendly buttons or CTAs in place of hyperlinked text (have you ever tried to tap a little line of hyperlinked text on mobile? It's not very easy).

You can find our more in-depth guide to mobile email best practices right here .

2. Make sure your styling works in different email clients.

Another big factor that heavily impacts the way your HTML emails appear in your subscribers' inboxes is the email client they're using to open the message. Every email client loads emails slightly differently, so an email that looks a certain way in Gmail will likely look different in Outlook.

Luckily, if you know how most popular email clients load particular HTML and CSS elements, you can create a pretty consistent experience across different users' inboxes. It's all about knowing which unsupported tags to avoid and adapting accordingly. This comprehensive guide explains how the most popular email clients (including Gmail and multiple versions of Outlook) support and render different styling elements.

You can also check out an article we wrote on optimizing emails for different email clients .

3. Be conscious of how long your HTML emails take to load.

How long your email takes to load could very well be the difference between gaining a new customer and losing a frustrated subscriber. While it can be tempting to take advantage of all the different styling options and opportunities to incorporate visuals that HTML emails offer, none of that matters if your email takes too long to load.

As you design your HTML email, remain conscious of how long your email will take to load — especially if someone is, say, opening your message on their morning subway commute with a weak data connection. Here are a few little steps you can take that will go a long way towards improving load time.

Use images sparingly.

That way, you’ll bolster the message you want to get across to subscribers. Always use an image compressor (like Compressor.io ) to reduce the file size as much as possible. Most image compressors can significantly reduce the file size of an image without compromising on quality, so taking this extra step won't hurt the visual integrity of your email.

Use standard web fonts.

Custom fonts are great for spicing up a landing page, but they can add an extraneous layer of complexity when added to an email. As we talked about above, all email clients handle style elements differently, and this especially extends to fonts. To be safe, use standard web fonts and check to make sure the email client most of your subscribers use supports a particular font.

Try an HTML minifier.

An HTML minifier (like minifycode.com and smallseotools.com ) automatically removes code that isn't needed in an HTML file. Repetitive, extra elements will be stripped out, but the actual rendering of your email should remain the same (always test it out!). Each line of code impacts how long an email takes to load, so taking the time to remove junk code can have a positive effect on load time.

Keep your message focused on a single objective.

The best way to reduce email load time is to reduce how much content you add to each of your email sends. It might seem obvious, but too many marketers try to stuff too much content into their emails. Not only does that lead to an off-putting user experience (nobody wants to read a novel in email form), but it can send your load time off the charts and cause users to abandon your email. Keep it simple, and your users will thank you.

4. Plan (as much as you can) for end-user inconsistencies.

The screen size and email client aren't the only factors that can alter the way your HTML email renders in your subscribers' inboxes. Elements like the version of their email client, their operating system, their unique user settings, their security software, and whether or not they're automatically loading images can all impact how your email loads.

As you can probably guess by that hefty list of factors, trying to solve for all of them (every single time you send an email) would probably be enough to make you throw your computer across the room.

But you don't have to be completely helpless in the face of these variables — you just have to do a little pre-planning.

Consider creating a webpage version of your email.

This is kind of like giving your email a fail-safe button. If for some reason — due to one of the many factors discussed above — your lovingly designed email renders like an absolute mess when a subscriber opens it, they will at least have the option to click "view as web page" and see the email as you intended it to be.

Since style elements render much more consistently across web browsers versus email clients, you'll be able to have way more control over the web page version of your message. In HubSpot, there's an option you can turn on that will generate a web page version automatically.

Create a plain text version of your email.

A plain text version is exactly what it sounds like — an alternative version of your HTML email that renders in completely plain text. Adding a plain text version of your HTML email is important because some email clients and user settings can't (or choose not to) load HTML.

If this is the case, the client will look for a plain text alternative version of your HTML email to load for the user. If one doesn't exist, it could signal to the recipient's email server that your message is spam — or potentially dangerous.

Most email tools like HubSpot will automatically provide a plain text version that displays if a recipient's email server requires it, but if you're coding an HTML email from scratch, you'll need to create something called a multipart MIME message .

A multipart MIME message is an email that contains both a plain text and HTML version of the same email. If a recipient's email client or security system doesn't allow HTML email, the plain text version will be displayed. This is a process that requires an advanced knowledge of coding, so we recommend working with a developer.

Make sure your email still makes sense if the images don't load.

Some users have automatic image-loading turned off, which means they'll see your email without images when they open it. For this reason, don't rely entirely on images to get the meaning of your message across, and always add alt-text to the images you do include. Alt-text will load even when images don't, so your subscribers can get the general idea of what the visuals include.

5. Conduct thorough testing.

Finally, you'll need to test your HTML email at every stage of development to ensure it works across different email clients, operating systems, and device types. Don't wait until the very end of the process to test out your email — testing as you work is the best way to spot inconsistencies between different email clients and ensure you're creating the most consistent experience possible for your recipients.

Some email tools (like HubSpot) offer in-app testing within their email builders to make the process easier. If you're working from scratch, you can use a tool like HTML Email Check or PreviewMyEmail to get a better idea of how your email will look in different email clients and devices.

Simple and Free HTML Email Templates

There are an overwhelming amount of HTML email templates available on the web, and they vary in quality, responsiveness, and price. We've pulled together a selection of free HTML email templates that provide a responsive user experience. Be sure to read the terms and conditions on each individual template before use.

1. Product Promotion HTML Email Template by HubSpot

Whether you're launching a new product or simply advertising your existing offerings, this email template is a great place to start. Included in the free version of Marketing Hub's email tool , this template offers plenty of room for customization. You can easily add images, text, and buttons in an intuitive drag-and-drop editor. You can also be confident that the templates you design will be fully responsive on any device.

The main benefit of using this template is that it's bundled with all other Marketing Hub tools . Plus, you have other templates to choose from — you don't have to stay confined to this option. The drag-and-drop email editor is another fantastic plus.

2. Company News HTML Email Template by Campaign Monitor

I personally love that this modern template is so sophisticated and minimal. The subtle color palette and simple design make it a versatile option for many industries and purposes, and it's been tested on different email clients and devices to ensure a consistent user experience across platforms.

3. Welcome HTML Email Template by Unlayer

Though this template was designed for a fitness company, you can easily adapt it for your own use. This clean, muted template is a great way to display content your team has created and connect subscribers with your most recent products or blog posts. The design features two fully responsive columns with multiple color scheme options, and room at the top to highlight a call-to-action.

4. Minimalist Welcome HTML Email Template by MailBakery

Proof that sometimes less really is more, this easy, fully responsive design makes the most of whitespace and keeps the focus firmly on your words and visual elements. Without design distractions, your content can really shine — on any device.

This template is available on the MailBakery email template store. I love it because you can simply download it and upload it to your preferred tool, whereas other templates require you to use their software to access their templates. I would recommend it if you're comfortable handling HTML files and if you're familiar with the upload process for your tool.

5. Free HTML Email Templates from Bee Free

I couldn't decide on a template to feature from the Bee Free marketplace, so I've decided to recommend its entire library instead. This collection of free, open-source templates are completely responsive and tested across popular email clients. You can edit and build on them on the Bee Free platform, then export the HTML file to your local drive and upload it to your preferred email marketing tool .

These are an ideal option if you want a more styled, polished starting place, but you still want to be able to customize the design to fit your company's needs. Each template is available in multiple formats for different marketing purposes, like transactional emails, NPS collection, and email subscriber re-engagement.

6. Store Sale HTML Email Template by Campaign Monitor

This sleek, responsive design from Campaign Monitor would be perfect for sending out a discount code — but it could also serve as a stylish way to showcase your latest products to email subscribers. I like its clear and attention-grabbing CTA, as well as its space to include more information.

This template is free to use, so long as you sign up on the Campaign Monitor platform. It’s also worth checking out Campaign Monitor’s full library of responsive email templates .

7. Stylish HTML Email Template by ActiveCampaign

This email template from ActiveCampaign is modern and optimized — perfect for introducing your company or your products. Its hero section includes ample space for an image and a call-to-action, and further down, you can prompt your readers to check out more products, giving you a second chance at converting them.

To use this free HTML email template, you'll need to sign up for an ActiveCampaign free trial. Its email tool starts at $49/month and includes 3 seats, making this template a great fit if your email marketing team includes several people.

8. Apology HTML Email Template by Stripo Email

I especially like that this template allows you to ask for feedback right in the email. That makes it easy and simple for the recipient to tell you how they feel about their interaction with your company thus far.

To use this template, you only need to sign up on Stripo's free tier , which allows you 4 email exports.

9. Hero Image Free HTML Email Template by ZURB

ZURB is an email template provider that has created a series of free email templates for anyone to download. This one includes a clear heading, a hero image, and a call-to-action highlighted in blue. I love that it has a sidebar to include additional links. This is a good fit for newsletter-dependent brands.

You'll want to heavily customize this template with your brand colors and fonts to make it feel more like "you." Otherwise, it's a fantastic tool-agnostic option. Simply download the template and upload it into your preferred email marketing software.

10. Password Reset HTML Email Template by Foundation Framework

I especially like this template because it already looks so good without customizing it. All you need is to change the button's color to one of your brand colors, and you'll be all set. Plus, you can use it with any tool.

Create HTML Emails to Increase Your Subscriber Count

HTML emails are an engaging way to share what’s happening in your business and keep subscribers coming back for more. With the tips and templates we’ve shared, you’re well on your way to creating beautiful HTML emails without writing a single line of code.

Editor's note: This post was originally published in June 2019 and has been updated for comprehensiveness.

hbspt.cta._relativeUrls=true;hbspt.cta.load(53, '46021438-991c-436c-b822-f52fd12b1f38', {"useNewLoader":"true","region":"na1"});

Don't forget to share this post, related articles.

12 Email Marketing Trends Marketers Should Know [According to My Inbox]

How to Create a Landing Page: The Ultimate Guide

20 Email Best Practices That Actually Drive Results

Email Analytics [Research]: 8 Email Marketing Metrics You Should Track

The Best Time to Send an Email [2023 Research]

What is Graymail? Here's What You Need to Know

How to Write a Marketing Email: 10 Tips for Writing Compelling Email Copy

16 Best Email Previewing, Testing, & Rendering Tools

How HubSpot's Email Team is Responding to iOS 15

What is Email Cadence? What Marketers Should Know + Best Practices

Boost Opens & CTRs with HubSpot's Free Email Marketing Software

How to Create HTML Email With and Without Coding (Full Guide)

Emails are a great way to reach out to any audience. But inboxes get crowded. If you’re going to have the impact you want, you need your emails to stand out from the crowd. 

You need your emails to look great as well as read great.

How do you do that? You design them using HTML code. The same way you design and build a web page.

Great if you have the programming skills to code an HTML email. But here’s the good news. You can create an HTML email from scratch without any code at all.

In this article, I’m going to walk you through both methods. Building HTML emails with code, and without code.

What is an HTML Email?

An HTML email is an email created using computer code. Like web pages, HTML emails are built using so-called ‘markup’ languages HTML, CSS, and XML. HTML stands for hypertext markup language. It builds the structure of a web page or email. 

CSS stands for cascading style sheets. This language styles how things look on screen. XML is short for extensible markup language. It helps different computer platforms read the same data.

More simply, an HTML email is an email with a clear visual design. Go to your inbox and open a standard email from a friend or colleague. What can you see? It’s mostly just text. This is called a plain text email.

An HTML email is different because it contains more than just text. Look in your inbox again for an email from a company. Something like a newsletter or a promotional email. Does it look different? It’s more than just plain text, right?

An HTML email is built to look great and grab attention. There’s colour. There are images and graphics. There’s eye-pleasing formatting and style. HTML emails are mostly used by businesses for marketing. Emails are key to how many companies manage customer relationships. But to work, emails need to have an impact. Businesses use HTML email to stand out and grab attention.

Companies need marketing emails to trigger a response. That’s why HTML emails often include ‘calls to action’, or CTAs. It’s not enough if recipients just open and read the email. Businesses need subscribers to act. Click through to view a special offer. Sign up for a new service.

An HTML email is a vehicle for these CTAs. Create a pretty email. Grab attention. Get your audience to act. Let’s look at how it’s done.

How to Create an HTML Email without Coding

HTML without code? Isn’t that a contradiction? Not if you have a drag-and-drop editor.

Website platforms like Wix and Squarespace have been using them for years. They were real game-changers in web design. With a drag-and-drop editor, anyone can build attractive, functional websites. You don’t need to have coding skills.

The same has happened with emails. If you use an email marketing service (EMS), chances are it has a drag-and-drop email builder. It’s how you make great-looking newsletters and campaigns, fast. Like their web editor cousins, they’re super easy to use. You only need basic IT skills.

For this article, I chose to use Beefree . It’s one of the best email template builders. Not only can you build great-looking, responsive emails fast and simply. It’s also free to use. And did I mention how easy it is?

Beefree lets you save bits of design to use again on future projects. If you’re part of a team, you can add comments for colleagues to see. Let’s see how it works. 

1: Select a template or start from scratch

Beefree has more than 1250 free HTML email templates . That’s huge! Whatever type of business you’re in, you’re sure to find an HTML email template that fits.

To help you find the right one, templates are grouped by industry and usage. I find the usage category most useful. Here you can find 155 different newsletter templates. Or 286 templates for promoting an event. There are some cool niche categories, too. Want to tease your contacts with an HTML email that gets them guessing at what comes next? Choose from one of 15 ‘mystery’ templates!

Seasonal templates are also handy for tying a promotion to the time of year. And then there are ‘automated’ templates. These don’t build themselves (watch this space, though). They’re for things like password reset emails or order confirmations.

You don’t have to choose an HTML email template. If you’d rather go it alone, just choose the ‘Start from Scratch’ option. That’s what I did to build the email template below. And I’ll walk you through exactly how I did it.

Browse 1250+ HTML email templates

2. Customize your email

Whether you choose an existing HTML template or a blank canvas, the process is the same. The Beefree editor lets you customize layouts, text, images, and colour schemes. And you use the same tools to build designs from scratch.

Creating the layout

This is what the editor looks like with a blank template. I could have started to pull content blocks in from the right straight away. But I wanted a little more help with structure. So I went to the Rows menu to look at some suggested layouts. I decided to pull in a single-column option. 

I’d also recommend clicking the Show Structure icon at the top of the page at this stage. This makes it clear what you’re working with. I now have a simple HTML email template with four parts. A header, a main body, a CTA button, and a footer. The Designed by Beefree footer can only be removed if you sign up for a paid plan.

The purple header section is just an empty placeholder. To fill any row or section, you go to the Content menu. I pulled a Title block to the top of the page. 

I decided I also wanted to add a main image to the layout. So I dragged and dropped an image block underneath the CTA Button. It’s that easy to customize your layouts. Just click and drag the content blocks where you want them to go.

What about adding some colour to the HTML template? To set a colour scheme for the whole email, go to the Settings menu and click Background Colour. I chose a solid plain black to match an image I wanted to use.

There are two options to set the background colour. First, click on the box with a HEX colour code in it. You can type in the code of the colour you want, if you know it. Or you can click on the visual colour chart that appears to find a colour you like. 

Even when you use the colour chart, the code appears in the box next to it. This is important for matching the colours you use elsewhere on your HTML template.

Adding text

Next it’s time to add our text. HTML emails can be as text-heavy or light as you wish. It all depends on what you want to achieve. But I always think it’s a good idea to grab attention first. Focus on eye-catching design and short, clear messages. You can always add more detail further down the email.

It’s super easy to add or edit text in Beefree. All you have to do is click on a text block and type.

I started with the Title block. When you click on a text-type block, two formatting menus appear. You can change the font type, size, and colour in both. But the menu under the text box has extra options. Things like adding special characters and emoticons, or hyperlinks. In the menu to the right, you can change the alignment and layout of the text itself. 

I wanted my title to stand out more. So I increased the Line Height and then the Font Size. Then I changed the alignment to centre. I also changed the colour, again to match the image I had in mind. 

I repeated the same steps with the other two text boxes. This time I went for white text colour to contrast with the black background. And changed the font size.

When I was done, I realised the layout didn’t look quite right. So I swapped the position of the title and the first text block. This made the main title stand out more in the middle. It’s easy to move content around any time you like in Beefree. You just click in a block and drag from the crossed arrows icon. I love that flexibility. You can tweak layouts all the way through as you build. 

Drop your images

Beefree makes adding images to your HTML email easy. When you add an image block, you will see a ‘Browse’ button in the centre. Just click on this to find your image.

You can add your own images using the Upload and Import buttons. Use Upload to find picture files stored on your own computer or hard drive. Or Import to link pictures from the web. This includes pulling in images from social media, Google Drive and Dropbox. 

The third option is to search Beefree’s own free stock image library. This is a brilliant resource. There are over 500,000 images available through Pexels and Pixabay. Images are key to making great HTML emails. If you don’t make an HTML email visually appealing, you might as well stick to plain text emails, right?

All images then get stored in your own File Manager. Once added, you’ll see all your image files every time you click the image block browse button. Just click Insert to add an image to your email.

Back in the editor, click on the image block to edit it. I wanted to resize my image. The easy way is to disable the Auto-Width. Then use the slider to change the size.

I wanted to crop my image, so there wasn’t such a big gap below the CTA Button. To do this, you click Apply effects and more. Here you find more options for changing the size and layout of your image. You can also apply filters and add text to your image.

Get started with Beefree for free here

Include your CTA

So onto the final piece of the design, the CTA button.

To customize your CTA button, click on the block in the editor preview. Again, you see two menus of editing options. The horizontal bar in the main window gives you text formatting options. The menu to the right is where you can format the button itself. And most importantly, paste in your destination URL.

After typing my CTA and adding my link, I wanted to change the colour of my button. I copied and pasted the colour code of the background to make my button black. And then did the same with my title font colour to make the button text match.

3. Export your HTML email

Your no-code HTML email is made. Now for the important part. Sending it!

Beefree isn’t an ESP or an email marketing platform. So you can’t send directly from Beefree. But it’s really easy to export your design to different email marketing software. 

Every design you make in Beefree has an Email Details page. You can get here from your Projects list by clicking View Details next to a template. When you’re ready to use your design, click Export.

A pop-up menu appears with four options:

Get HTML and Images downloads your code and images as a ZIP file. This method will work for any ESP, and it’s free. Check to see if your ESP has an HTML import option. If they do, great. You can upload the ZIP file, and send campaigns with your custom template.

Another option is to copy the HTML code. You can paste HTML into any ESP. But you have to use online images in your design. Otherwise, they won’t appear. Beefree will host images for your email. But you have to pay for it.

Push to your sending system is the easiest option. It uses integrations to export your HTML email straight to your ESP. This is available for platforms like ActiveCampaign , Sendinblue , Hubspot , MailUp , Constant Contact , and Mailchimp .

Try Beefree for free here

4. Import your HTML email templates to your email marketing tool

Beefree has a direct connector that exports HTML email designs straight to multiple email marketing platforms. This is available for:

• ActiveCampaign
• Campaign Monitor
• Constant Contact

For all other email marketing platforms, you can export and directly import. Some examples are GetResponse , Moosend , Benchmark Email , and AWeber . Check out our reviews of free and cheap email marketing tools here.

Export your HTML from Beefree as a ZIP file, as explained above. Then check to see if your email marketing service can import ZIP files. If not, you can copy your HTML email code over and host your images online.

Another option is to use Zapier . Zapier is a service that connects web applications. Most email marketing tools are available on Zapier. By connecting to Beefree, you can send your email code straight over.

How To Code An HTML Email

On to our second method for creating an HTML email. Writing the HTML code yourself. For this, you need to know HTML and CSS. 

Why do that if modern no-code editors are so easy to use? HTML programmers argue that coding gives them more freedom and control. Drag-and-drop editors are easy to use. But you’re always using pre-formatted templates and content blocks. Yes, you can customize it all. But there are limits to what you can do.

If you create an HTML email by coding, you take those limits away. You build the templates, the content blocks, and the overall designs completely from scratch.

So how do you do it? You don’t need special software to code HTML. You can use a simple plain text editor like NotePad. Once you have written your script, upload it to your email platform.

But it’s a good idea to use an HTML editor. They come with many useful features, such as highlighting errors in your code. Some even show you the design your code is creating as you write it. Most professional web developers use HTML editors these days. There are lots of options. Read our guide to the best HTML editors to help make your choice. 

For this project, I went for CoffeeCup. It’s a WYSIWYG HTML editor. Which stands for “what you see is what you get”. That means you see that you code as you write it. It also has useful features like HTML code templates you can use. It’s a good ‘in-between’ option. It gives you more control than a drag-and-drop editor. But it helps you out if you’re not a coding expert.

The first stage in coding an HTML email is to set a Doctype. This tells the software reading the code that it’s dealing with HTML. And also what version of HTML you’re using. This is important, so email clients know what tags to expect and interpret them correctly. 

Every piece of HTML code should start with the <!DOCTYPE html> tag. 

For a long time, the recommended version of HTML for coding emails was XHTML 1.0 Traditional. This is a hybrid language that covers both HTML and XML syntax. XML makes it easier for different services to interpret data consistently. This is important if you want your emails to look good across lots of different email clients.

These days it’s best to use HTML 5 to code emails. HTML 5 is the latest version of HTML and also covers XML syntax. This makes life easier as you only have to use the <!DOCTYPE html> tag. The software assumes you mean HTML 5 by default. If you want to use another version of HTML, you have to specify this.

In CoffeeCup, you can set the Doctype using the Quickstart option. That gives you a choice of HTML versions in a drop-down menu. HTML 5 is the default.

The <!DOCTYPE html> tag alone doesn’t set you up to start coding. You also need a pair of opening <html> and closing </html> tags. All code you write for your email has to sit within these tags. 

You should also use the <html> tag to set the language for your email. The tag for English, for example, is <html lang=”en”>.

Again, the Quick Start option in CoffeeCup lets you set this automatically.

2: How to prepare Your HTML <Head> template

There’s a lot of prep work when coding HTML. You spend as much time setting up your document as you design and add content. The Doctype and <html> tags are just the start. After that, it’s time to add an entire section of code that is all about setup. The <head> section.

Don’t confuse this with the header of your HTML email. The header is the top section of your email’s content. The <head> section of your code isn’t anything you see in your design. It sets metadata for the rest of the document. Like the Doctype tag, metadata tells the email client important information. This includes more details about how the code should be read. But it’s also where you set style and formatting rules for the document.

All metadata has to go between <head> and </head> tags. Here are 2 common meta tags you will want to use:

• Viewport: Every email head should contain this tag: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>. This fixes the visible area of your email to the width of the device screen.
• Charset: Computer software can’t read text characters directly. They need codes to interpret them. The character set tells a software which code library to use. UTF-8 is the most common.

You can also give your HTML email template a name. Type the name between the <title></title> tags. If someone opens your email in a web browser, the title will display in the tab.

3: How to style your email HTML

The <head> section is also important for styling your HTML email. It’s where you set style rules for the whole email. 

HTML is styled using a different coding language called CSS. You use CSS to set colours, font types, sizes, and layouts. 

CSS style rules can be added to any part of an HTML code. But there’s one very good reason to add CSS to the <head> section of an HTML email. Gmail ignores CSS in the body script. Some of your subscribers are bound to use Gmail. It’s the world’s most popular email service provider. If you don’t set CSS rules in the <head> section, your email won’t look right in their inbox.

All style instructions go inside <style></style> tags. In the above code, I set the following style rules. 

First, I set the default font colour (“color”) to black (#000000). And the background colour to white (#FFFFFF). I also created a space for adding a background image from a web URL. The ‘no repeat’ instruction means any background image will only appear once.

Under, the “a” tags set text colours for unopened and opened links. Then the <p1> tag sets the default paragraph font type. You could set different fonts for different sections using <p2>, <p3>. And you could do the same for headings using <h1>, <h2>, <h3> etc.

Media Queries: Coding a responsive email template

You have to think about how your design will look on different devices and in different email clients.

Different screen sizes and different software change the way the same email looks. Your aim is to make a single design look as good as possible on every platform. This is called responsive design. 

HTML and CSS give you tools to do this. We’ve already seen the viewport meta tag. Making sure the visible area of your email changes with different screen sizes is a good start. But there are other differences you have to consider. Like screen resolutions and browser window dimensions etc.

CSS media queries tell different email clients and devices how to display your email. Here’s an example:

This code changes the layout depending on the size of the screen. The ‘max-width: 600px’ rule applies to screens less than 600px wide. Such as mobile devices. On these screens, my email will display with a single column and default 30px font size. On screens up to 900px, it will have two columns and bigger text.

4: Final email <head> code example

So that’s the <head> code finished. Here’s how mine looked:

I should stress that this is a simplified version. A genuine <head> section for an HTML email can be much longer. It seems a lot just for setting up your HTML email template. But this stage is essential. It makes sure different platforms display your email the way you want. And it also gives you complete control of style.

5: How to build your email <body>

Now to create the HTML email content. Everything you want to be visible in your email has to go between <body></body> tags.

If you have experience coding websites, a couple of things you should know at this point. By now you might expect to have set the style rules for your entire page in the <head> section. But it doesn’t quite work like that when you create an HTML email. You end up doing a lot of styling in the body, too.

Why? A lot of ESPs are really bad at reading CSS layout rules. To get around this, it’s safer to build HTML email layouts using tables. But you still have problems if the ESP strips out style rules for your tables in the <head> section. So it’s safer to style tables ‘in-line’ as you build them.

Here’s an example:

This creates a ‘nested table’. Or a table within a table. The first is a containing table. It becomes the background for the rest of my design. I set the width to 100%, so it fills the screen on any device. And set a background colour, because this table will now overlay my body background. The role=”presentation” code tells the client the table is for visual display. Not data.

The second table is now my content area. The <tr> tag creates a row. The <td> tag creates a cell. For now, it will just display the text ‘Email Vendor Selection’. 

Notice this time I fix the width of my table to 600px. This remains the standard width for content elements in HTML emails. It’s based on how most desktop email clients display emails so is a little out of date. But if you get your CSS media queries right it will render easily to mobile.

Also notice that values for margin, padding, and border spacing are set to zero. This is because lots of email engines will add their own margins to tables. So you could end up with lots of white space you didn’t plan for. It’s safer not to add any yourself.

So far I’ve coded one section of my template. This will sit at the top of my page, so call it the header. To add more sections, I just repeat the code for the nested table. By repeating the table twice more, I now have a three-part structure. Header, main body, footer. A simple HTML email template.

Next, I added more rows and cells to the middle table or main body. I created placeholders for text and images. This is how my email looks so far:

Plain, yes. But now I have a structure, I can start to add content. I can format each row and cell as different elements. I can set different heights and widths to shape them. I can format colors and text types and sizes. From a basic layout, I now have full control over my design.

It takes a lot of coding to turn this plain outline into a completed email. Here’s what I did next to my header section:

I used the <background> tag to turn the table black. Because I’m using nested tables to structure my email, I will have to do this for every table. Then I changed the text colour of the <h1> tag to white. Setting the colour of every text element separately gives you more flexibility.

Notice that I also set margins for the <h1> tag rather than for the table. This stops email clients applying default margins around text. If they do, your email will look different on every client. The font size and margins also control the height of the row.

6: HTML email newsletter footer

You might think the bottom-most section of your email is not very important. Does anyone look all the way down here, anyway? But paying attention to the footer of your newsletter is important. 

It’s where you include contact and subscription information. This should include details about how the recipient subscribed to your newsletter. And how they can unsubscribe. This is a legal rule in most countries now.

Some things to include in your email template footer are:

• Company details.
• An email to send queries to.
• Social media icons. Give subscribers a chance to follow you elsewhere.
• A reminder of how the person signed up to receive your emails.
• An unsubscribe link
• Copyright details.

As for creating your footer, again the easiest way is to nest tables. This time I added a new table within the existing ‘footer’ cell. This meant I could create 2 new cells to make columns. By setting the cell width to 50%, you automatically get two columns.

Then I set style rules as before. The <a href> tag creates a hyperlink for my unsubscribe option. You should create a dedicated unsubscribe page on your website. Paste the URL next to the href tag. People can then use this link to opt out of your emails. You can even set this up so the opt-out happens with a single click. 

List-unsubscribe header

Your email footer isn’t the only place you should have an unsubscribe option. It’s good practice to have a link in the email client header. This is where the subject and email sender are displayed when someone opens an email. 

You may need some help setting up a list-unsubscribe header. If you send emails through an email marketing service, you should be ok. Most will have list-unsubscribe as an option. Some make it default.

But to send through normal email clients, you will need to contact the administrator. They will have to enable list-unsubscribe on your emails. 

You can use a landing page URL as explained above. This is called an HTTP list-unsubscribe header. Another option is to give your ESP an email address. This is called a mailto unsubscribe header. When someone clicks the link, it will send an email to the address you give. You will then have to unsubscribe them manually.

7: Test your email template code

I’m leaving testing to the end, but you shouldn’t. It’s important that you test HTML emails right the way through development. You need to know straight away if something doesn’t work right. Leave it until after you finish coding, and you could face a huge job fixing it.

One of the reasons I use CoffeeCup is that you can preview your code with a single click. This is great for checking your HTML email looks the way you want as you work. But it doesn’t tell you how your emails will look on different email clients or browsers. Or how it will render on mobile devices.

For this, you need a dedicated testing tool. Some popular options to try out are HTML Email Check , Email on Acid , and Preview My Email . 

Use Your HTML Email Template Code in your ESP

So you’ve tested your code, and it looks great on all platforms. Now the important part. Sending it.

How you add HTML code to an email depends on the ESP. In Gmail, there’s a simple trick. You don’t need to add the HTML code to your email. Instead, save your code as a .html file . Then open it with your browser. You should see the completed design of your email. Copy and paste this into the Gmail Compose window and hit send.

In Outlook, you have to change the message format to HTML. In Settings, there will be an option called ‘ Compose message in format ’. Click on this, and select HTML. Now you can paste your code into the Compose window. Outlook will convert it when it sends.

Most email service providers and CRMs with email marketing will let you import HTML code to create a new template. You can then use this to send a campaign. How you add HTML will be different on every platform.

Conclusion: Creating an HTML email

Code or not to code? That’s the big question when you create HTML email. In this article, I’ve run through both options. But which is right for you?

There’s no doubt that using a no-code drag-and-drop editor is the easiest way to create an HTML email. If you don’t have any HTML coding skills, this is the one for you. Or even if you know how to write HTML, using a no-code editor is still quicker. You can save yourself lots of time.

With a tool like Beefree, you can build great-looking HTML email templates in minutes. They’re responsive by default. And you can use it for free. If you want to check out alternatives to Beefree, read our review of 12 free HTML email editors . 

So, case closed. No code over own code all the way? No, we can’t dismiss writing HTML code for emails altogether. 

Let’s remember why we want to build HTML templates ourselves in the first place. To get unique designs that reflect our brand. Writing code from scratch gives you greater freedom and control over the design. So if you have the skills and want something very custom, coding still makes sense. Just be aware it’s a technical process.

Create your own email template with Beefree here

How to Create HTML Email FAQ

How do you write an email in html format, can i create an html email in gmail , what is an html email template , how do i create an html email in outlook web, how to send email in html.

About Pauly Newman

Pauly Newman is a content writer specialising in business blogging, report writing, software reviews, and online copywriting. He has 5+ years of email marketing, marketing automation and software review experience. He tested over 60 business software including email marketing tools, CRMs, outreach services, SMTP providers, and AI writing tools. With a background in journalism and PR, he understands business content from both sides. And knows what makes for great, engaging copy, but also understands that for businesses, the written word is all about driving value.

Guides by Industry eCommerce email marketing Fashion and Apparel Franchise and Retail chains Travel & Hospitality Financial Services and Banks Restaurants & Bars

Reviews Free & Cheap Email Marketing Software Best email newsletter software ActiveCampaign Review GetResponse Review Brevo review SendinBlue review MailerLite Review Benchmark Email Review BenchmarkONE Review AWeber Review EmailOctopus Review Moosend Review Mailmodo Review EngageBay Review iContact Review MailUp Review Sellfy Review

Alternatives Best Mailchimp alternatives Best Constant Contact alternatives Best Sendgrid alternatives Best Amazon SES alternatives Best HubSpot alternatives Best ActiveCampaign alternatives

New: Schedule a demo Schedule a demo

Pricing guides MailerLite pricing GetResponse pricing HubSpot pricing Brevo pricing ActiveCampaign pricing

Subscribe to our newsletter

A Complete Guide to Create Your Own HTML Email

• May 24, 2022
• Email Coding
• 40 MIN READ

If you want to code a pixel-perfect HTML email, here is a step-by-step DIY guide, that will facilitate your email template production process...

[This post has been updated on 24th May, 2022]

Development of an HTML email code is almost like metamorphosis of a tadpole into frog. It undergoes so many changes right from the conceptualization to the final delivery of the HTML email template . Once the email marketer determines the purpose of sending an email, the copywriter drafts the email copy according to the wireframe. Subsequently, the email designer works on the email design according to the wireframe. After the design gets approved, it is assigned to the email developer who transforms the PSD or AI or PDF file into a pixel perfect HTML email . This file is loaded in the ESP and deployed after thorough testing for flawless rendering. Most of the marketers send HTML email rather than a plain text email because of its enhanced aesthetics.

As a number of people are involved in the creation of an email HTML, even a minor change can take too long to ger resolved. In fact, it roughly takes 4-6 hours to develop an email template. The intricacies of the process add to the time taken in developing a single HTML email template. Of course, you can create free HTML email from the options available online but custom-made emails perform better than those free templates.

Email Coding Can Be Cumbersome

Our team of 150+ experts can help with email templates that are

• Pixel-perfect

Through this article, we will show you how to create simple HTML email template , which you can refer to for basic troubleshooting of your email template HTML code.

Table of Content:

• How to Prepare your simple HTML email template ?
• How to Style and design HTML email ?
• What does the Final <head> code look like
• How to build your Email <body>
• Points to remember while creating HTML email templates

HTML Basics: How to Create Simple HTML Email Template?

A basic HTML email template includes two parts:

• Header section : Any code placed between <head> and </head> is referred to as the header section. All the media queries, styling and CSS animations are specified in this section.
• Body : Any code placed between <body> and </body> is the body section and the rendering engine uses the code to create HTML email structure.

Step 1: How to Prepare your HTML <head> template?

The head section of a simple HTML email template resembles the following code:

<!DOCTYPE> is used to inform the rendering engine which HTML tags to expect and which set of rules the HTML and CSS adhere to. Even though some email clients (webmail clients like Gmail, Google Apps, Yahoo! Mail and Outlook.com) strip away the code and apply their own, it is a good practice to include this in your email template HTML code.

Even though you are free to choose between XHTML 1.0, Transitional XHTML 1.0, and Strict HTML5, most email developers worth their salt use Transitional XHTML 1.0.

<meta http-equiv=”Content-Type” /> specifies how to process text and special characters in your email. The “text/html” instructs the rendering engine to consider the following strings of text as HTML.

<meta name=”viewport” /> instructs the device, on which the email is viewed, to set the viewable area of the email as per the screen width.

The title of the email is written between the <title> tag. When a subscriber clicks on “view online”, the title of the email is displayed on the browser tab.

Step 2: How to Style Your Email HTML?

Styling is cool, but its difficult.

Whatever styling you are going to implement in your email such as text formatting, image size, media queries go between the <style> tags as different classes. The basic format for adding <style> tag is <style type=”text/css”> where in “text/css” specifies the media type as CSS. Placement of the <style> tag is tricky as 6 out of 36 email clients do not support <style> tag in <head> and Gmail doesn’t support it in the email body.

Text formatting

In case you need to add a centralized formatting condition (shown below) for any text, you can specify the attributes in the specific class of the basic HTML email template.

e.g. in order to disable text decoration in hyperlinks, add

Media Queries

In case you are coding a responsive email template, the media queries need to be added in the following format.

For example, consider the following media query in the email HTML code:

When the HTML email design is viewed in a device that is between the screen width of 481 and 699px:

• The width of the email (em_main_table) is forced to be 100% owing to “width: 100% !important;” attribute.
• The section that is associated with em.hide class shall be hidden due to “display:none !important;” attribute
• The section that is associated with em.h20 class will have the fixed height of 20px due to “height: 20px !important;” attribute
• Any element associated with class em_padd will have a fixed padding of 20px (horizontal) and 10px (vertical).

P.S: !important forces the rendering engine to not make any alterations to the media query.

To create responsive HTML email example, separate media queries are specified to be activated at screen widths lesser than 480px.

The media queries you have learned till now will render in a few mobile layouts. But rendering in some of the layouts require a specific set of media queries, and only an expert developer can help you do that. You can learn more about the challenges and opportunities of responsive email template in this blog.

Interactivity in email In case you wish to send HTML email example with interactive features, the CSS part of the code is to be added before you close the <head> section.

Interactivity in HTML emails is hard to code and requires a lot of testing to render perfectly in email clients. There might be email HTML code available on the internet, but it still requires a lot of coding experience to build interactive emails. You can learn more about interactive HTML emails in our infographic – Interactive Email Design Elements . Here, you will also be able to download samples of each interactive element that can be added in HTML email template code.

Want us to create awesome interactive emails for you? click here now >>

Step 3: what does the final <head> code look like.

So, our final <head> in the HTML email template code looks like

Step 4: How to build your Email <body>?

The 600px range for HTML email design was calculated for Windows Outlook working on a 1024px desktop monitor, 10 years ago. Now devices with screen widths of minimum 800px are flooding the market; so you can build HTML emails with a width of 700px at least, and add background colors to emulate widescreen emails.

So, we start with a body of 100% width with color #efefefef.

In this we add a table that is center aligned at 700px in the HTML email design .

Now, we will include a pre-header text and “view online” as a part of a cell, made by nesting another table in the above-mentioned table.

Now, we add the hero image in the HTML email format.

Now, we add a separate table for the email copy:

Now, we add a CAN-SPAM compatible footer in the HTML email code:

Now, before we close the HTML email body, we add the following code:

This adds extra spacing to force the desktop layout in Gmail

So, your final email template HTML code should be:

There you go! You’ve successfully created an HTML Email! You can use this HTML Email Example and create your own.

Desktop Version

Mobile View

Points to Remember While Creating HTML Emails

Creating HTML emails is technique-sensitive subject as you have to bear in mind many dos and don’ts to ensure flawless rendering across different email clients and devices.

1. Avoid using JavaScript and complex CSS coding

Website developers heavily rely on JavaScript for interactivity and visual richness. However, email clients do not support JavaScript in the HTML email format. If you still want to incorporate interactivity in HTML email code, you can use AMP in HTML emails. Currently, AMP components in email are supported by Gmail, Yahoo!, and Mail.ru.

Sometimes, you can experiment with CSS3 and HTML5 in your HTML marketing emails but make sure you test the HTML email design with its complicated coding before hitting the “Send” button.

2. Make use of font stacks

While converting email to HTML, pay attention to the fonts used. Write an HTML email with proper font stacks, thereby ensuring proper readability and rendering across different email clients.

While creating HTML emails, use email-safe fonts like Arial, Times New Roman, and Courier New. Provide fallback fonts in your HTML email design regardless whether you choose web-safe fonts or not. It is always advisable to do so as all email clients do not have the same support for fonts.

How to create a font stack in the HTML code for email template?

Font stack is a strategic compilation of fonts according to their priority in the HTML email format. You must place the font you want to use in your HTML email body at the top. Mention the email-safe alternatives and default font below that.

3. Monitor the loading time of the HTML email template code

If your email takes too long to load, it will turn off the subscribers and affect the performance of your HTML marketing emails. Therefore, you must use images and visual elements judiciously in your HTML email examples. When you build HTML email, make sure you do not add too many high-quality images. For every new image loaded in the HTML email body, a new request is generated to the server. Your loading time is directly proportional to the number of requests. So, how to design visually rich HTML email free from any rendering issues? The answer is to optimize your image size and set the content width to 600px. Also, add suitable alt-text with the images when you code HTML for email.

Use HTML minifier to remove unnecessary code from the HTML email format. Do not copy-paste from Microsoft Word when you code email to HTML. It will add too many additional codes.

4. Pay special attention to accessibility in the HTML code for email template

If you want to write an HTML email that reaches to all subscribers, you must follow accessibility best practices. When you convert PSD email to HTML, choose the visuals, font size, color contrast, and CTA button size in such a way that everyone can access it. Send HTML email with proper lang attributes and semantic tags so that screen readers can interpret the email HTML formatting. Arrange the HTML email template code from left to right and top to bottom for better readability. Single column layouts are the best bet to create accessible HTML email examples.

Wrapping Up

With the help of this step-by-step guide, you can build an HTML email template that can be used for your email marketing strategy. The above methodology is just one of the many processes used to train our developers and test the email templates rigorously using tools like Email on Acid to deliver pixel perfect results as per our clients’ requirements. You can easily use this HTML Email code to create Mailchimp Email Templates, Pardot Email Templates, Marketo, Salesforce Email Templates and many other ESP newsletter templates as well.

Ideally, being an email marketer you need to dabble into various aspects of email, including email design, email coding and template testing. At the same time, most brands and agencies partner with us for their email template production needs to deliver high converting email marketing campaigns.

Did you like this post? Do share it!

• Copied to clipboard

Get In Touch

We shall get back to you within a few hours.

• Latest Posts
• Related Posts

Kevin George

Latest posts by Kevin George ( see all )

• The Why & How of Interactive Emails in SFMC - October 19, 2023
• Top 75 Holiday Email Subject Lines to Boost Open Rate (Updated) - October 18, 2023
• Create a Memorable Subscriber Experience with Interactivity in Emails - September 15, 2023
• Countdown Timer in Mailchimp- How to Create One and Things to Keep in Mind! - November 30, 2023
• Unraveling Tips and Tricks to Increase Your Marketo Engagement Score! - November 28, 2023
• Email Design System- The Key to Achieving Consistency in Email Production - November 27, 2023

Social Sharing

8 tips to streamline communication with offshore team.

• Outsourcing and Dedicated Resources

The Definitive Guide to Bounce Mail Management in SFMC Email Studio

• Salesforce Marketing Cloud

Leave a Reply Cancel Reply

You may also like.

• Oct 07, 2022
• Oct 14, 2022
• Nov 23, 2021

WE CAN ALSO HELP YOU WITH

Email template productions.

Transform your requirement into visually-appealing & high-converting email templates.

EMAIL OPERATION SUPPORT

Focus on your business strategy; let us handle the day-to-day operation of your email campaigns.

DEDICATED RESOURCE TEAM

Eliminate the woes of hiring and training for resources with our dedicated team of scalable email experts.

Digital ASSETS

Get more from your paid marketing campaigns through conversion-driven landing pages and banners.

Deploy your app quickly and scale as you grow with our Hobby Tier

A Beginner’s Guide to Creating and Sending an HTML Email

Quick pop quiz: What’s the name of the language that web developers use to create the structures of the sites you visit every day? Smart and over-clever answers aside, Hypertext Markup Language (HTML) is an evergreen standard, present at the birth of the web. However, this doesn’t only apply to web pages. Your inbox is fertile ground for HTML email design.

This makes sense if you consider how many images, GIFs, videos, and branded content you see almost every hour in your emails. While you could offer a plain text email, an HTML version will offer more benefits and give you more opportunities to brand and market yourself and your business .

For this post, we’re going to discuss how to create and send HTML emails, and why you should do so. At some points, we’ll get deep into how you’d code up an email, but you won’t need this knowledge to create your own.

What Is an HTML Email?

The emails that hit your inbox can come in two flavors:

• Plain text: It’s almost a telegram for the modern age. There is no styling or minimal formatting, and the recipient will see words to the exclusion of all else.
• HTML: This is a whizz-bang firecracker compared to plain text, and it’s design-heavy. It uses HTML code to present an email, although as we’ll discuss, it’s not always going to utilize modern web standards.

For example, you’ll know if you receive a plain text email, as it looks exactly like a plain text document. In contrast, an HTML email looks almost the same as a modern web page (give or take a few styling and formatting concerns):

In most cases, an HTML email won’t strive to provide the ultimate in interactivity or dynamic engagement. Again, it’s something we’ll cover later on, but HTML email is lagging behind the web , standards-wise. As such, HTML is more of a design-driven tool than one to help provide an experience. This brings up a question though: Why would you want to use HTML email if the only reason is visual? We’ll look to answer this next.

Why You’d Use HTML Email Over Plain Text Formatting

It’s rare that you’ll see a plain text email from a business, for a few reasons. However, plain text isn’t wrong per se , more that it offers none of the benefits of HTML email formatting. For example:

• You can use the inherent visual elements to help focus attention on the various parts of your email content .
• By extension, an HTML email is a rich format for presenting your content. This means you can leverage the elements users expect to engage with them, such as images, video , and more.
• Combined, both of these aspects can offer you a superb opportunity to brand your content, just as you would your main website.

However, deciding to use an HTML email isn’t the perfect storm you’d think. There are also a few drawbacks to consider. First, you have to consider the user’s experience, just as you would when you design a website. This might not only include a browser – lots of users also prefer to read emails in a dedicated client.

What’s more, you also have to consider some of the privacy and security issues that dominate web development. This is especially true if you want to include JavaScript, you pull in third-party fonts, and other aspects.

Because of this, you have to fight accessibility and standards battles almost on more fronts than the web. It’s tough to create an HTML email that works on a cross-browser and client basis. Of course, it’s possible to do this, and we’ll cover the technical aspect in a future section. For now, you’ll want to get the various elements of your email decided, then look to implement them.

The Essential Elements (and Typical Practices) of an HTML Email

This article will reference web design in a number of places, because of the inherent similarities. One aspect that offers a similar workflow is how to decide on the facets and sections of your HTML email.

Much like the web, there are some elements that are practically non-negotiable for your emails. Of course, you need content. There are a few typical elements to consider here:

• Your header is important because this is the first impression your email will offer to readers.
• Just like web design, thinking about what elements display above the fold will be beneficial too.
• The body content is vital because after all, this is why the reader will subscribe to your emails .
• The footer of your HTML email also offers much value to you and your subscribers too, and it can be an undervalued element of your emails.

There are a few points here we can touch on further. First, consider how much emojis permeate our day-to-day web usage. While they aren’t a strict HTML element, tasteful application of emojis can do wonders for your content, especially your header:

The footer is also the best place for some essential legal information. Two of the biggest issues relating to emails are spam and whether an email hits the right inboxes (if at all). This is something we’re going to look at in a later section, as it’s a vital part of creating and sending HTML emails.

Considering Some Typical Practices for Your HTML Emails

There is lots of crossover with email marketing when it comes to some of the most optimal practices you’ll use within your designs and layouts. There is one that you’ll want to include almost as a non-negotiable element: A double opt-in.

One of the biggest email marketing hacks is that you want to bring your emails to the reader. In other words, provide an opt-in form on a website, as this has a big rate of conversion . However, it shouldn’t be the only time you ask for confirmation. It’s an excellent practice to also send a second opt-in as an email:

There are a few reasons for this:

• One, it builds trust with your reader, because you get express permission to send them emails.
• By extension, you also have explicit consent in the case of a spam referral (more on this later).
• You help stop email and spam abuse for others because they have to specifically opt into a subscription to your emails.

In fact, because a double opt-in involves you sending an email to the address in question, it’s the best way to validate the email address .

There are a few other good practices to consider too. However, the following are more optional, in that you’ll get fantastic results, but there will be times when you won’t want to follow these guidelines:

• Your subject line should be perfect, and your email content should be to the point. Given the advent and now dominance of mobile browsing , this is especially important.
• Speaking of which, you’ll want to make sure that your HTML email reads without a hitch on smaller screens – this means no overreaching banners or oversized logos.
• If you include a strong call to action (CTA) within every email, you stand a good chance of better user engagement.
• Tracking is a contentious issue, but this will help you fathom what your users do when you send them an email. Some providers include a solid set of analytics as a standard.

Just as important as how you present and set up your email, is how to create the design and layout. In the next few sections, we’ll look into how to build an HTML email, then finish up with some tips to send them.

The Technical Approach You’ll Need to Take to Create an HTML Email

If you have some web development experience, you’ll no doubt use HTML5 as your markup language. This is a world apart from previous instances of HTML and XHTML and includes more of a division between styling (of which there are practically zero elements that are valid) and structure.

For an example of the latter, HTML5 offers a number of different tags to define content areas of your site.

However, email HTML is a different beast, in as much as it’s behind the times somewhat. As such, you’ll want to use all of those old HTML4 tables and inline styling to create your layout. For why this is, you’d need to speak to the developers of email clients, as they will often alter the HTML email as it comes into your inbox. One of the most common acts is to strip CSS and JavaScript out of emails for security reasons (among others).

This means you’ll need to provide another way to add styling to your HTML emails – inline is the only option for compatibility. Speaking of compatibility, this is an important consideration. You have to balance a unique styling with the capabilities of the end user’s email client. As such, there are a few other technical considerations you’ll want to note:

• Using system fonts rather than a third-party one will save you an HTTP request , load the email fast for the user, and deliver a consistent-looking email to boot.
• You could go even further and provide a plain text version of your email for those who can’t view HTML email in their client. Lots of sites will offer an HTML version you can access online, for both this reason and as a backup.
• Alt-text is just as important for HTML emails as it is for the web. As such, use alt text everywhere you add an image to your content for accessibility .

There’s one technical aspect of an HTML email that you should think about more, as it can straddle the line between inline styling, CSS, and other factors. Let’s discuss “conditionals” in brief.

Using Conditionals

One holdover of HTML emails that used to be in an older HTML web developer’s toolkit is that of conditionals. This is where you specify which browser will use a particular code snippet.

In honesty, this is almost always a Microsoft-based issue. For web developers, Internet Explorer (IE) was the demon browser spawn. However, for HTML emails, it’s Outlook . Between the different versions, you may see that your styling renders in a way you didn’t expect.

Because of this, you can add condition blocks to your code, and define those elements. For example, you can target both Word-based and IE-based versions of Outlook.

First, Word:

This is for Word-based versions of Outlook:

For Internet Explorer, you use a different tag:

This is for IE-based versions of Outlook:

If the browser you target is WebKit-based (such as Apple Safari, the PlayStation browser, Amazon’s Kindle, and more), you can use a media query to provide specific styling:

This gives you a slightly better way to adapt your HTML email to the end user’s display. On the whole, HTML styling for emails isn’t perfect, but there is enough grunt under the hood of each email client to help you create some stunning layouts.

Your Options For Building HTML Emails

Despite what we already discussed, you have a number of flexible options to help you create HTML emails. For example, you can build from scratch using a nice text editor and HTML.

However, there are other options we can consider:

• You could use a dedicated service, such as an email marketing app, to create your emails. Lots of apps will provide a visual builder, but also give you the scope to write your own code and even create your own template .
• Speaking of which, you could download a template for your HTML emails. This is a lot like a WordPress theme, in that it provides a base for the rest of your design. From there, you can customize it to your liking. It’s a good middle ground between the coding and building options.

Later on, we’ll build our email using HTML. However, before this, let’s look at some of the email service providers you might want to consider, regardless of your chosen method for creating your emails.

3 Email Service Providers Perfect for Creating HTML Emails

Because the focus of this post is on creating HTML emails, we don’t need to get too in-depth when it comes to email service providers. Even so, there are a few you’ll likely consider.

We can’t cover them all, so we’re going to mention three of the most popular. Let’s round them up.

1. Mailchimp

This email service provider is a go-to solution – almost a knee-jerk decision for many. Mailchimp is the gold standard in email marketing apps in the eyes of many , and there are a lot of good reasons for this:

• It includes lots of typical features you’ll find across many other similar apps.
• There is lots of assistance when it comes to promoting a business, such as marketing automation, audience management tools, and more.
• You have a top-notch suite of creative tools to help you build HTML emails.

Of course, we want to look at the latter here. The Creative Assistant is a way for Mailchimp to learn about your brand and help you build and personalize your emails. You can also connect third-party apps such as Adobe Photoshop to help you build the perfect email.

It’s also straightforward to work with existing HTML, especially if you use Mailchimp’s Classic Builder. Regardless, you do have ways to import HTML templates if you need them.

Mailchimp uses a complicated hybrid of monthly subscription tiers and the number of contacts to come to a final price. We’d suggest that small businesses would need a plan of around $35 per month, up to 2,500 contacts. However, you’ll need to research the best plan for you based on the features you need and the number of contacts you’ll think you’ll bring on board.

For some, AWeber represents the pinnacle of email marketing. It’s a fantastic and powerful platform and includes an arguably more focused feature set than Mailchimp.

It includes a number of essential features that you’ll need to send emails:

• The ability to automate and schedule messages, campaigns, and more.
• You have great organizational tools, such as subscriber tagging and segmentation.
• AWeber also lets you automate the content you create for your emails. For example, you can turn blog posts into mailouts with a minimum amount of work.

When it comes to creating your emails, AWeber has a few tricks up its sleeve. It uses a drag-and-drop visual builder and includes a library of custom templates to start you off. What’s more, you can connect AWeber to your Canva account and use the latter to help design your emails.

There’s also a dedicated HTML editor , which isn’t the case with Mailchimp. You even get this on AWeber’s free tier. Speaking of which, the pricing is more straightforward here. You’ll pay around $25 per month for up to 2,500 contacts.

3. Constant Contact

Constant Contact is an outlier when it comes to email service providers, but it’s more like a secret weapon. It offers a fantastic range of features and functionality, and also lets you work with HTML when you need to.

Much like AWeber, Constant Contact focuses on email marketing over other business-centric areas. As such, it’s got a feature set you’ll enjoy:

• You have customer list management tools and marketing automation functionality.
• There are extensive reporting options.
• You’re able to integrate ad programs from Facebook, Instagram, and Google.
• There are lots of ways to engage and attract new subscribers to your lists.

The design functionality of Constant Contact is good too. You can choose a template and work with a visual editor to build the whole design. However, you can also work with HTML – sometimes in advanced ways in relation to other tools.

Pricing is reasonable too. You’ll pay around $35 per month for the Core plan and 2,500 contacts, or $70 for the Plus plan.

What You’ll Need to Build an HTML Email

Before you begin to build your HTML emails, you’ll need a few tools and skills to hand. Here’s what you should arrange before you crack your knuckles and begin:

• You’ll want to use a code editor you find comfortable because it will need to support you during the process. If you don’t know which one to pick, lots of users opt for Visual Studio Code , although Brackets would be ideal for this particular task. We’re going to use Onivim2 , which is a Vim-style editor based on the core VS Code infrastructure.
• While you’ll need HTML skills , you won’t need the same set of knowledge as a modern web developer (although it doesn’t harm your prospects).
• You’ll need a way to test your emails out – MailHog is a solution we feature elsewhere on the Kinsta blog.
• While we’re not going to use a pre-built template, you might want to use one of these in the future.
• You’ll also need an email provider, as you’ll need some way to send your finished HTML email.

With all this in place, you’re ready to open a text editor and begin. Next, we’ll run through the process to create a basic HTML email.

How To Create an HTML Email From Scratch

Before we start, it’s worth noting that we’re not going to use a dedicated service such as Mailchimp or AWeber. Instead, we’re going to create a simple template from scratch that you can import wherever you need.

We’ll split the process into a few different sections because although an HTML email is simply relative to a website, there’s still a lot to consider.

1. Create the Foundation For Your HTML Email

It’s a good idea to start with the skeleton of your email template. This will follow some typical practices for HTML in general:

There are a few things going on here that we should mention. First, we specify a “doctype” for Transitional XHTML 1.0 , which is a common practice among email developers. From there, we specify an XML namespace, which will be important later.

You’ll also notice some meta tags, and these define the character set and how the browser should render the HTML that follows in its viewport.

The rest of the skeleton is straightforward – there’s the title and body tags that we’ll use next.

2. Add the Structure For Your Email Template

Harking back to our discussion on what HTML tags to use, you’ll remember that we don’t want to use <div> or other typical structural elements. Instead, we want to use tables, as this renders well within email clients and services.

Everything will start with a simple set of <table> tags within the body:

The attribute we set within the <table> tag helps screen readers to parse the text within, so it’s good for accessibility.

From here, you’ll need to add new rows and columns to your table in order to build the HTML email template. How you do this is up to you, but it’s good to start with a base of header, footer, and body sections. We won’t repeat them here for brevity, but we will mention them as we progress.

The good news is that you can continue to add new rows to your table if you need to add further sections. However, from here, you’ll want to start introducing styling and other elements.

3. Include Styling for Your Elements

The beauty of HTML is that it is almost agnostic to your styling. The markup is straightforward, but the styles you apply might not be. This is where you’ll see your HTML email come to life.

As a guide while we design, we’ll add a <style> tag to the <head> to display a general border:

To begin, we’re going to make sure there’s no unexpected space in the body or the main table (which here acts as our body because some email clients will remove that tag):

We’re also going to add some centering and remove any extra padding from our different section cells:

If you take a look at this in your browser, it won’t look like much:

However, from here, you can further develop your email template using tables and styling tags. For example, we’ve made a hero section for our header, and expanded the footer and body:

You will likely create a better and more suitable template for your needs, but using nested tables and some basic HTML skills, you can create a responsive and custom HTML email template that hits the mark.

4. Test Your Email

Before you finish, you’ll want to test your email in order to make sure it renders well on different devices. There are a few different services that can help here.

For example, Email on Acid includes a full pre-deployment checklist to help you make sure your template doesn’t cause issues:

Litmus users will know of PutsMail , but it’s accessible to all:

You’ll need to sign up for an account to use the service, but it’s straightforward to use. You leverage the functionality to preview emails within a number of different browsers and on various devices.

Mailgun also offers a fantastic service that ties in with its main offering. You’re able to test out email clients, browsers, and more through the interface. In addition, you can test out elements such as subject lines, to make sure you keep your open rates high.

However, once you test out your email, you’ll need to make sure it hits the recipient’s inbox. In the final section, we’ll discuss this more.

Sending an HTML Email: What You Need to Know

One benefit of using an email marketing service that we haven’t yet mentioned is how it will handle the legal aspect of sending emails. This is important because if you get something wrong here, you won’t just fail to reach a recipient, you’ll get yourself into trouble.

An email marketing service will already have a good working relationship with the organizations that handle spam and related facets of sending an email. As such, it’s often a good idea to choose one of these if you don’t want the worry of delivering spam.

However, there are a few tips we can give that matter regardless of the platform you use:

• Make sure you follow all of the guidelines of the CAN-SPAM act , especially if your main audience is in the US. Of course, different countries will have their own legal directives .
• Include a double opt-in for subscribers. This is where you ask them to confirm a subscription, but also send a second confirmation. This protects you and the subscriber if there is a spam query or privacy request down the line.

Deliverability is a key element of your emails, and this is something we cover in another article, in-depth. However, this concept is a mixture of several aspects, such as using good code, obtaining the right level of permission, and more.

This ties into another facet – your sending score. This is akin to a credit score and is ultimately a measure of your reputation. There are a few different components here that make the whole:

• Your site’s bounce rate.
• The number of complaints your site receives relating to the emails you send.
• The reputation of your IP address.
• Your domain name signature.

The latter relates to your DomainKeys Identified Mail (DKIM) and Sender Policy Framework (SPF) . In addition, you can check the reputation of your IP through services such as SenderScore , or IPQualityScore .

If you choose the right simple mail transport protocol (SMTP) provider in the first instance, you can tick off some of these boxes in one swoop. Much like your choice of email marketing solution, this service will understand what you need to keep your deliverability high, and on the right side of the powers that be.

Mailgun is a solution we mentioned earlier, and this could be ideal. However, there are others such as Mailjet , Sendinblue , and even Gmail’s own service .

Email is not anywhere near coming to an end. As such, using email for your own needs – such as promotion and marketing – is a fantastic and cost-effective way to reach potential subscribers, users, and customers.

While you could buy a dedicated HTML template, creating your own HTML emails is not that difficult. It could be the way you succeed if you have a specific vision in mind. However, you’ll need to pull out your old HTML tricks, such as conditionals and nested tables. HTML email design is not yet at the level of modern web design, but you can still achieve lots with little.

Do you have a need to create HTML emails, and if so, what questions do you have? Let us know in the comments section below!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website , and connect with Salman on Twitter .

Related Articles and Topics

The Ultimate Guide to Email Design

11 WordPress Lead Generation Plugins to Grow Your Email List

Leave a reply cancel reply.

By submitting this form: You agree to the processing of the submitted personal data in accordance with Kinsta's Privacy Policy , including the transfer of data to the United States.

You also agree to receive information from Kinsta related to our services, events, and promotions. You may unsubscribe at any time by following the instructions in the communications received.

How to Create an HTML Email (Tips & How-tos)

• Jesse Sumrak

Time to read: 5 minutes

• Facebook logo
• Twitter Logo Follow us on Twitter
• LinkedIn logo

5 tips for how to create an HTML email

1. make your emails responsive.

• Include media queries: Media queries let you adapt your email templates to different devices.
• Use a single column : It might be easy to read 2-column emails on a desktop, but it can get a bit dense on mobile devices. 
• Increase the font size : Don’t go any smaller than a 13- or 14-point font.
• Space out your links: You don’t want readers accidentally clicking the wrong link because your links were too close together.
• Add alt tags : Alt tags describe your images in case the images fail to load.

2. Add images sparingly

3. keep it simple, 4. use prebuilt email templates, 5. test your emails, html email structure, create an html email template with code, check out other email templates from twilio sendgrid, recommended for you.

{{baseInfo.title}}

No resources to show

Error: Unable to load resources

Most Popular

Send with confidence.

Partner with the email service trusted by developers and marketers for time-savings, scalability, and delivery expertise.

• Ask about the Stripo Editor
• Ask about Stripo Plugin

Drag-n-drop and HTML email template builder

Meet Stripo — an intuitive and simple yet flexible email template creator. Speed up production. Test and export emails to any ESPs. Drag and drop & HTML editors.

Design emails your way

Drag & drop email builder.

Build and customize every element of your email message intuitively. No code email development. Helpful pre-built modules and content blocks to streamline the process.

HTML & CSS code editor

Code emails from scratch or start in the Drag-n-Drop builder and then add custom HTML elements. You can use both D-n-D email template builder and HTML email editor simultaneously with no switching.

Push email messages to 80+ ESPs

Worryless export in one click. No misplaced email elements, no manual code setup required. Pure email code that we provide you with ensures hustle-free migration and lets you work with several Email Service Providers at once.

Don’t use an ESP? Export email messages to your CRM through Zapier or Webhook, or push them to Gmail, Outlook. You can also download emails as PDF, Image, or HTML file if needed.

Speed up email production

Pre-built modules.

Save you from the need to re-create the same email elements. Design content modules once and use them across multiple email campaigns.

Automatic email replacement

If you edit one of your trigger emails with Stripo and then push it to an ESP the new version will automatically appear in an existing workflow.

Bulk editing and export

Great feature if you need to update some elements of your emails simultaneously. For example, you can edit contact info in all email footers at once. Just activate synchronization between modules and done.

Easy translation process

Translate emails with Google right in the editor or embed custom translation in respective email blocks automatically. All the language versions can be exported in one click and stored compactly.

Test email messages before sending them

Test traditional HTML and AMP HTML emails.

See how your email will render across 90+ devices.

Try the preview mode for desktops and mobiles.

Embedded spellchecker

Dark mode for email preview

Missing links and alt-texts highlights

Invite teammates to work with you

Assign custom roles and access levels

Invite writers, designers, proofreaders, or viewers with respective levels of access to your workspace. Collaborate with complete control of any changes your teammates make.

Share the results of your work for approval

Get a shareable link to the web version of an email or send the latter to your teammates’ email addresses.

Co-editing & commenting

Create email templates together.

Need a hand with your first template?

Our email designer can create it for you. Just fill in the brief and we`ll get back to you shortly.

Build AMP- powered emails

Actions right in email.

With AMP, recipients can perform actions directly in the email instead of going off to a landing page. For example:

• Booking tickets, hotel rooms, appointments.
• Browsing product catalogs, choosing product sizes and colors.
• Sharing feedback, filling out review forms, and taking surveys.

Real-time data

Content in emails gets updated the moment recipients open them. Update quantity, prices, product images, blog post tittles, etc. in your newsletters. All you need is connection with servers — we got you covered here, too.

Customer engagement

Increase ROI by 300%, and user response rate by 520% by letting users play mini-games, answer quizzes and fill in feedback forms and surveys.

Stripo plugin

The plugin can be easily customized to your requirements and integrated into any product.

Getting Started

Coding an HTML email isn't much different than coding a website was back in the late '90s. The same design tools are used to produce your final result. And the same general design principles are still in play: contrast, repetition, proximity, and alignment are all important. In this section, we'll go over some HTML email basics and introduce you to some Mailchimp-specific information to help you get started.

• HTML Email Basics
• Template Language
• Using Mailchimp

If you’re new to email marketing, there are some basic principles and background information on HTML emails that every email designer and marketer should know. In this section, we'll go over some HTML email specifics so you can make sure your campaigns get delivered.

• Email Clients
• How HTML Email Works
• Sending Legally
• Spam Filters
• Types of Email

This is where the fun starts. Email is all about keeping your design simple and straightforward, and focusing on your message. In this section, we'll delve into the specifics of designing your email for desktop and web email clients, as well as mobile devices.

• Calls to Action
• Layout and Purpose
• Mobile Friendliness

Development

Time to get your hands dirty. While email development is an exercise in trial-and-error and a lesson in compromise, it's not *that* difficult once you understand the pitfalls. Here, we'll cover HTML, CSS, and various testing scenarios to help you build a rock-solid email.

• Responsive Email
• Testing Emails

Designing and coding HTML emails can be a daunting task, so we've compiled a list of resources to help you navigate the process as smoothly as possible. The tools in this section will help you create great emails and turn you into a lean, mean email machine.

• Email Blueprints
• Email Client CSS Support
• Email Marketing Guides
• HTML to Text Email Converter
• CSS Inliner Tool