Skip to main content

A Quick Guide to Creating HTML Emails

HTML may seem like an intimidating aspect of email marketing, but it doesn’t have to be. Learn how to hone your HTML skills to improve your marketing emails.

HTML, or hypertext markup language, is the code that’s used to create the basic structure of a website. Just as HTML allows you to completely customize the way a website looks, HTML emails give you more control over the structure of your emails. You can change the way font looks, customize the layout of your emails, and even incorporate graphics and buttons with the right HTML email format.

The only problem is that writing HTML emails isn’t as easy as it sounds. Following HTML email templates can help, but you still need to make sure your emails are responsive to different resolutions and work with different email clients. Plus, you don’t want to discourage readers with insane load times. If you want to overhaul your emails with HTML, here’s a quick guide to HTML for emails.

You might be wondering, how do you create an HTML email? Reading a few guides about basic HTML can help, but writing HTML emails is a little different from using HTML to create a website. The first thing you need to do when you’re writing an HTML email is set the DOCTYPE, which determines the HTML and CSS rules that are followed when reading HTML. However, some email clients will overwrite the DOCTYPE and use their own set of rules for HTML.

Next comes the <head> section, which is where you put your title and other important information about your email. At the very least, your head tag should include a <title> tag within it, which should be closed with a </title> tag. You can also use a meta tag to define metadata inside the <head> section. Once you’re finished with this section, it should be closed with </head>.

Keep in mind that certain tags and elements may not work with certain email providers. Several email providers don’t allow you to use the <style> tag in the head of an email, while Gmail doesn’t allow the <style> tag in the body of an email. It’s also important to follow an email marketing guide for best practices because changing the layout of an email doesn’t mean the content is good.

You might have heard a lot of talk about plain text emails vs. HTML emails, but what’s the actual difference?

Plain text emails are the simplest type of email you can send because they only include plain text. These emails don’t contain any images, videos, or buttons. As a matter of fact, all the text within a plain text email typically appears the same, so there’s no real customization with plain text emails. Plain text is essentially what you’re working on within Notepad, while HTML is closer to what you’re working with when you write in Microsoft Word or a rich text editor. However, plain text emails still have their place in the modern world.

HTML emails are written using hypertext markup language code, which allows you to implement graphics, add buttons, and embed videos directly into your emails. You can also use HTML tags to customize the way the font looks, whether you want to use a different font or change the color or size of the font you’re using. Heading, subscript, and superscript tags allow for even more customization when it comes to the way text looks in an HTML email.

While a lot of people are unfamiliar with HTML emails, the what-you-see-is-what-you-get (WYSIWYG) editors that a lot of email clients use offer similar features. Just like you can make text bold, underlined, or italicized with Gmail, you can use HTML to customize the appearance of your emails. The only real downside to these WYSIWYG editors is the fact that your emails may not appear the same across multiple devices and email clients. That being said, most of the popular WYSIWYG editors do a fine job if you want to create a campaign without learning to code.

If you want to make sure you’re writing high-quality HTML emails that are readable across several devices and email clients, you need to make sure you’re keeping up with best practices. Here are some HTML email format best practices to help you find the perfect format for your email campaign.

Responsive to screen size

There was a simpler time when the majority of computer monitors ran at an 800x600 resolution, but those times are long gone. Today, there are phones, computers, laptops, and tablets capable of running much higher resolutions, and you can’t even count on different devices to use the same aspect ratio.

Responsive design means your emails are designed to look good no matter what screen resolution they’re being viewed at. You don’t want part of your email to be cut off because it doesn’t fit a user’s screen, but you don’t want graphics and text to be so small that they’re hard to see, either. You can do this by setting tables and images to different widths depending on the screen size they’re being viewed on. It helps to thoroughly test your HTML email layout before you send it out to your mailing list.

Load time

If an email takes too long to load, a lot of readers will simply give up and move on to the next email. You might think everyone has a fast enough device and internet connection to load any email with ease, but that’s not the case for many people. For people who are using an older device or connecting to cellular internet, loading an email that’s packed with images, videos, and other media content can be difficult.

That’s not to say you shouldn’t include any media elements in your emails, but you do need to be conscious of load times and how they affect your email bounce rate. Creating HTML emails is as much about maintaining minimal load times as it is about making your emails look pretty.

Difference between email providers

One of the biggest problems facing web developers is that different web browsers may render the same HTML and CSS code differently. The same is true when it comes to HTML email marketing and different email clients. While your email may look great when you’re designing it, some email clients may not render images or videos properly, or they may not offer support for the font you’re using.

When you’re designing an HTML email, make sure you design with different email providers in mind. This isn’t just a best practice for writing HTML email formats, it’s one of the most important email best practices to follow in email marketing in general.

It helps to make it easy for subscribers to provide feedback on emails they’ve received. If you’re getting lots of feedback about images not loading or emails displaying improperly, consider tweaking your HTML layout a bit to find something that works better.

Design for mobile

Back in the day, most email users were accessing emails via computer, so you didn’t have to worry about designing for different devices as much. Now that mobile browsing has overtaken desktop PC and laptop usage, designing your emails for mobile devices is more important than ever. You need to make sure your emails look good whether they’re viewed on a tablet, a laptop, or a smartphone.

If you’re not designing your HTML email format to work with mobile devices, you’re losing out on a significant portion of your audience for email marketing.

Test it!

Once you think your HTML email format is ready for action, it’s time to test it to see for yourself. You can try sending your emails to various accounts that are connected to different email clients, or you can use email testing tools to take the hassle out of the process. The important thing is that you thoroughly test your emails before you send them out to your mailing list.

In addition to testing, you can ask readers for feedback on the format of your emails. If you get several complaints about an image not showing up properly or an email taking too long to load, that’s a sign that you need to do a better job of designing your HTML emails for that particular client.

HTML is easier to learn than you think

Most people have become accustomed to using WYSIWYG editors, but a good HTML email format still has a place in the modern world of email marketing. While HTML email design may seem a bit complicated at first, it’s a lot easier once you learn the basics. Using testing tools and designing for mobile can even help you avoid crafting emails that don’t work with certain devices or email providers.

If you want to take the hassle out of creating HTML emails that work for your mailing list, Mailchimp can help. With HTML templates for emails and tons of great tools to help with email marketing and automation, Mailchimp is your all-in-one solution to email marketing. If your email marketing campaign needs a boost, give Mailchimp a try today.

Laptop screen showcasing 'Unlocking Advanced Email Marketing' Checklist

Get Mailchimp's guide for advanced email marketing

Grow your business with the right knowledge and strategies to improve your emails, capture the attention of audiences, and turn leads into loyal customers.

Fill out the form below to receive the one‑pager

Related Topics

Share This Article