How To Send HTML Emails: A Detailed Guide

Quick answer: To send an HTML email, use a responsive email-safe template, host images on public URLs, add a text fallback, test the layout in major inboxes, and send campaigns through an ESP or SMTP service instead of a personal inbox.

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: 

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).  

Use the browser/Gmail method for quick checks or one-off emails only. For newsletters, promotions, lifecycle emails, and transactional messages, use an ESP, SMTP relay, or Email API so authentication, unsubscribe handling, analytics, and testing are built in.

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

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: 

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

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.    

2. 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.  

3. 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:   

4. 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. 

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

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: 

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.  

2. 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. 

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. Check extension permissions before installing one.

Before you send: HTML email QA checklist

• Preview the email on desktop and mobile, including Gmail, Outlook, Apple Mail, and mobile inboxes.
• Inline critical CSS, check public image URLs and alt text, and make sure links and CTA buttons are visible.
• Test image blocking, dark mode, subject line, preheader, plain-text version, and unsubscribe path.

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. 

Authenticate the sending domain

If you send HTML emails at scale, design is only one part of delivery. Set up the required sender authentication for your domain, keep spam complaints low, and include a clear unsubscribe path for marketing emails. Gmail sender guidelines require SPF or DKIM for all senders to Gmail accounts; bulk senders also need SPF, DKIM, DMARC alignment, and one-click unsubscribe for marketing and subscribed messages.

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.      

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

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.

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.