How To Send HTML Emails: A Detailed Guide

How To Send HTML Emails: A Detailed Guide
29 April, 2024 • ... • 57 views
Natasha Zack
by Natasha Zack

Plain-text marketing emails no longer dominate the industry. Today, most promotional emails feature colorful eye-catching designs, interactive elements, hi-res images and whatnot. Yet you cannot just go and create an email like that with a popular email service like Gmail, even if you can code. Luckily, there are ways to circumvent the limitations. In this guide, we’ll explain how to send HTML emails with free tools in a few easy steps and give useful tips to ensure you get the best possible results.

What are HTML emails and why send them

In short, HTML emails are emails created using HTML (Hypertext Markup Language), which is a coding language also used to design web pages. If an email contains anything more than plain, unformatted text, it is most likely created with HTML, since it is the most popular coding language used in email design today. 

Here’s a typical HTML marketing email: 

An HTML email from Bored Cow featuring various design elements: images, icons, custom fonts, etc.
Source: Really Good Emails

Obviously, this is something you cannot create using plain text only. But why go to such lengths for a marketing email?  

Because the differences between HTML and plain text emails generally make HTML a preferable choice for marketing emails. The biggest benefit is, you can insert the elements you need to boost your email’s look and performance, such as embedded images, fonts, colors, and interactivity. For example, you can include an image to attract your customers’ attention, or a CTA button with a link to your web page.  

The problem is, popular free email services will only let you create HTML emails with their visual editing features, and these are not nearly enough for professional marketing emails. 

Yet it is still possible to send complex HTML emails with Gmail, MacOS, and other clients. Here’s how.

How to send HTML emails step by step

To send an HTML email, you need to create it first, so make sure you know how to create HTML emails. In this section, we’ll explain how to send an HTML email assuming you already know how to write it. To illustrate the process, we’ll be using an HTML email template from Selzy library (more on that later).  

Here’s what the template looks like. On the right, you can see the HTML code, and on the left — the rendered email:

An editable HTML email template from Selzy template library
  1. Write your email in an HTML editor

First, write your email code in an HTML editor of your choice. You can also use a standard text editor such as Microsoft’s Notepad for that purpose, but HTML editors are more convenient because they highlight code lines with different colors. 

Here’s what the code looks like in an HTML editor: 

Here’s what a small piece of the HTML code
Here’s what a small piece of the HTML code of the email template from Selzy library looks like in an HTML editor (Free online HTML editor by SKEditor)

And here’s the same code in a standard text editor: 

Here is what the same email code piece looks like
Here is what the same email code piece looks like when opened with the standard Microsoft Notepad app. Essentially, it is the same code, but it is much harder to read and edit because the different elements are not highlighted with different colors

If you don’t have an HTML editor installed on your device, free online tools can help. Some of them, such as Free online HTML editor, even allow real-time collaboration, which is a great feature for teams. The problem is, most online editors won’t let you save an .html file. However, some tools do allow it — for example, Postdrop. Anyway, you can always copy the code, paste it into the text file, and save it with the .html extension.     

Also, you don’t always need to write code from scratch. Instead, you can use a ready-made email template and simply tweak it here and there. To do that, copy and paste the template code and re-write the bits you need to alter.    

  1. Save the HTML file

When you’ve finished writing and/or editing your email, save it as an .html file on your device. If you’re using an HTML editor, that would be your default file format. For text editors, change the file type to “All files” and add the .html extension to the file name manually.  

Saving a document as an .html file with Microsoft’s Notepad text editor
  1. Use a web browser to open the file

Now, open the file you’ve just created with a web browser of your choice. 

Here’s what an HTML email looks like when opened in Google Chrome. As you can see, it renders as a typical marketing email from your inbox:   

An .html file containing the email template code when opened in Google Chrome
A web browser such as Google Chrome reads the HTML code and displays it as a regular email with text, images, and other elements
  1. Copy the content and paste into your new email

Finally, select the entire email content in the Chrome window (you can use Ctrl+A on Windows/Cmd+A on MacOS to do that) and hit “Copy”. Now the content is copied to your cache. Start your email client (Gmail, in our case) and open the “Compose” window to create a new email.  

Paste the content you’ve just copied into the email body, and — there you go. Your email is almost ready. 

An HTML email copied from the Chrome browser window and pasted into the Gmail “Compose” window

Now, add a subject line, choose your recipients, and hit “Send”.  

An HTML email copied from the Chrome browser window and pasted into the Gmail “Compose” window, with the “To” and “Subject” fields filled in

Other ways to send HTML emails via Gmail

The method described above is simple and convenient. Yet there are more ways to send HTML emails via Gmail and similar email services that you might want to try. Here are the most popular ones. 

  1. Chrome’s Developer Tools

Chrome’s Developer Tools allow users to work with and edit HTML code directly in the browser window. This option can come in handy if you are a web designer, but also if you want to send HTML emails without external tools such as HTML or text editors. 

Here’s what the code looks like in the Developer Tools window alongside the graphic render of the email: 

The Selzy email template’s HTML code as displayed via Chrome Developer Tools

To write and edit HTML emails with Developer Tools using Gmail, follow these steps: 

  • Open the “Compose” window in Gmail. 
  • Type any text into the email body. This will help you identify the part of the code you’ll  need to alter to see your HTML email in the “Compose” window. 
  • Right-click on the email body area with the text, then scroll to the bottom of the list and click “Inspect”. The window with the HTML code will appear on the right. 
  • Delete the text you entered and replace it with the HTML code of your email you copied from the source (i.e., your HTML or text file). 

Here’s what the process looks like: 

You can also find the place you need to alter without typing in the text first, but this is more difficult as you’ll have to look for specific words among the code lines.  

  1. Chrome extensions

Another convenient option is to use a Chrome browser extension. Typically, such extensions simplify the sending of HTML emails via Gmail and other email clients by offering one the the following three options: 

  • Editing the code directly in the “Compose” window
  • Customizing ready-made templates 
  • Helping to paste your HTML code into the email body 

These extensions are easy to find in the Chrome Web Store using the “html email” query. 

Some of the Chrome extensions for working with HTML emails available via Chrome Web Store

However, some browser extensions might potentially be unsafe to use. Besides, they also have limitations as some email clients might still render the emails created with extensions incorrectly.

HTML email best practices

Now that you know how to send HTML emails, here are some important details to keep in mind to ensure the best results. 

Upload images on the web

To insert images in your emails, upload them on the web yourself first. The images you find on the internet may get deleted, and your email will no longer display correctly. Ideally, upload the images to your own server.  You can also upload them to a public hosting service or a cloud storage such as Google Drive. 

When using public hosting or cloud storage, provide the link to the image file and not the folder containing the image, and make sure the link is public.      

Link sharing window in Google Drive

Also, remember to include the full path to the uploaded image in your HTML code, including the URL. 

A full link to the image as displayed in the HTML code

Avoid using external styles

In HTML documents, external styles are linked CSS (Cascade Style Sheet) files containing code that specifies the look of an email or a web page. These external styles are convenient and efficient, but not all email clients support them. As a result, your emails might render incorrectly in some cases. 

That’s why it’s best to stick to inline styles when sending emails with Gmail and similar services — i.e., to specify style elements directly in the HTML code. Although this will add more lines to your code, it guarantees that your style remains consistent across different email clients.  

Do not use web fonts

To ensure your email displays correctly in all clients, avoid using web fonts. Gmail, for example, won’t allow importing them anyway, so you can only utilize the few fonts available in the client, such as Sans Serif, Tahoma, Veranda, and others. To see the full list, click on the font field in the “Compose” window.

List of fonts available in the Gmail email client

The easiest way to send HTML marketing emails

All that said, we cannot but mention a convenient alternative to sending HTML marketing email with popular email clients like Gmail, Outlook, Yahoo, and others. 

Professional ESPs (email service providers) such as Selzy allow you to create, edit and send HTML emails quickly and easily without using any additional software, making the whole process more efficient. You can also use ready-made templates such as the one we’ve used to illustrate this article and work with them in the in-built HTML editor to produce unique professional emails for your business. In Selzy, you can try this feature for free and see how much more convenient it is. 

Wrapping up

These were the most popular and convenient ways to send HTML email via Gmail. Try them if you want to have more control over how your emails look and make them more effective. Alternatively, you can use a professional ESP like Selzy to up your email marketing game and get access to the in-built HTML editor and many other useful features.

29 April, 2024
Article by
Natasha Zack
I’m a professional journalist with 10+ years of experience. Throughout my career, I’ve worked with various kinds of media — print, online, broadcast. Currently, I write copy for brand media and teach English part-time. I also have my own edtech passion project dedicated to teaching English via Marvel Cinematic Universe.
Visit Natasha's

Latest Articles

Selzy Selzy Selzy Selzy