How to Send HTML Emails in Gmail, Outlook and More

02.05.2022
Read time: 13 min
Try Publicate For Free Today
Start Now
How to Send HTML Emails in Gmail, Outlook and More
Try Publicate For Free Today
02.03.2022
Read time: 13 min

With over a billion users, Gmail is one of the most popular email clients. So, knowing how to embed and send HTML email in the email provider is a desirable skill. In this guide, we will cover how to send HTML email and how to create HTML email.

And, while sending HTML emails is useful to know, we will also share how a web-based email builder like Publicate could save you time by helping you create beautifully designed emails in minutes without code. Plus, you can still use Gmail or Outlook to send your emails!

What are HTML Emails?

Before we get into how to send HTML email, let’s uncover what you need to be aware of when sending HTML emails.

1. Code-based

You can create HTML emails within email clients like Gmail, but you need to know how to use an HTML editor. When doing so, keep in mind that HTML email readers vary across email providers, so you want to code in a way that the maximum number of people will be able to view your email as intended. This starts with structuring content inside tables, storing images on a live web server, and using secure links that start with https://.

2. Text-based

As you likely know, the most engaging emails balance text and imagery. But, when it comes to HTML, not everyone will be able to download images by default. 

For this reason, it’s better to stick with more text so that your email doesn’t get blocked because of images or attachments. Mobile users also don’t see images from HTML emails, and it’s common for the majority of emails to be read on mobile. 

3. Follow Legal Guidelines

There are legal guidelines in place to protect consumers against receiving emails that they never signed up for. So, when you are sending HTML emails or any types of emails, you have to remain compliant with these regulations. 

4. Review HTML Emails

As with any email you send, be sure to review your email before you launch it. Make sure that links are going where you intend, images and fonts appear, and your email fits within the width of the box on the screen. 

5. Perform a Spam Test 

Before sending your HTML email to a mass email list, choose a test list to whom you can send out the email. Then, follow up to find out if the email hit their inbox or went straight to spam. This way, you can optimize your email send to actually be delivered. 

How to Copy and Paste HTML Email Content?   

If you create your HTML email in an email editor outside of your desired email platform that you’ll use to send, you can consider copying and pasting your creation. 

Here’s how that can be done: 

1. Save HTML

Start by coding your email and then saving it. On most HTML generator websites, you’ll have an option to either “save” or “download” your HTML file. You can also use the TextEdit application on a Mac or Windows computer. Here’s how to save your creation:

  • Windows: File > Save As > (enter a file name) followed by .html > Save as Type > All Files > Save
  • Mac: Format > Make Plain Text > OK > File > Save > click downward-facing arrow next to “name” and uncheck “Hide Extension” box > replace “.txt” with “.html” > Save > Use .html

2. Open HTML in Browser

Go to your saved HTML file and double click it to choose “Open With” and then open the file in your desired web browser. 

3. Copy Content

Highlight all the content on the web-page and “Copy” (On Windows, click CTRL and C to copy; on Mac, click Command and C to copy) 

4. Open Your Preferred Email Platform

Create a new email on your preferred email platform. This may be done with a prompt like “Compose” or “New Message.” 

Yahoo, Apple Mail, and Gmail are all set on default to enable HTML emails. For Outlook, you’ll have to enable HTML emails. 

5. Add Recipients and a Subject Line

Add your recipients to the “To” field and input a subject line that accurately reflects the content of the email. 

6. Paste Your Content 

Paste the previously copied HTML content in the message body, proofread, and send! (Remember: you may want to send to a test list first to perform a spam test). 

Rather than having to copy paste code, you can leverage a web-based email builder like Publicate that is equipped with HTML email templates

This allows you to design beautiful and branded emails without having any coding knowledge or calling upon a graphic designer. Then, with a few clicks, you can export your creation to the email provider of your choice (or alternative communication channel like Slack) for distribution. 

How to Send HTML Email in Gmail?   

Gmail and Chrome make it possible to actually edit your HTML code within the web browser and email platform. A lot of the steps are similar to what was mentioned above, but there are nuances because you can edit within the email composition itself. 

1. Copy HTML Email Text 

Start by copying the HTML’s body text, including <body and /<body> tags 

2. Open Google Chrome 

Be sure to use Google Chrome because it’s the only browser that’s going to work to paste HTML inside Gmail 

3. Open Gmail and Compose

Go to gmail.com, login, and click “Compose” in the top left panel 

4. Add Recipients and Subject Line

Input your recipients’ email addresses and the subject line 

5. Placeholder Text 

Input distinguishable placeholder text in the email composition so when you inspect and search, you can easily find where you want to make edits 

6. Inspect Window

Right click to open an “Inspect” window. This should open up a window to the right with the HTML code elements that you can click on when highlighted and select to “Edit as HTML”

7. Select Placeholder Text

Find the placeholder text you entered in the Compose message box. That’s where you’re going to paste the HTML you had copied from Step 1 

8. Paste HTML 

Paste your HTML in the placeholder text spot. You can use shortcuts like Command and V (Mac) or CTRL and V (Windows). Now, close out of the inspect box in the top right corner. 

9. Check Your Email 

Review your email’s presentation. If all looks good to go, you’re ready to send away. If not, you have to go back to the HTML editor and make changes. 

Picture source Unsplash

What are the Different Ways to Send HTML Email in Gmail?

You’re here because you want to know how to send HTML in Gmail. Although it can be a bit tricky at first, you do have different options for doing so. They include:

1. Copy and Paste Existing HTML

You can create HTML yourself and copy and paste it into Gmail. Keep in mind that if you’re choosing this route, you have to be aware of what Gmail allows in its HTML. For example, you can’t use external style sheets; instead, you’ll have to use inline CSS. there are HTML tags that might not be supported. Here are some tags that aren’t supported.

2. Use Chrome Developers Tools

As outlined just above, you can edit HTML directly in Google Chrome by using the “Inspect” element in your Gmail message window. In this case and the option above, you have to have HTML in existence to use. Although it can be a bit tricky at first, you do have different options for doing so. They include:

3. Use Chrome Extension

Alternatively, you can download a Google Chrome extension to edit HTML inside the Gmail compose window. With the extension, you’ll have a button within your email compose window that lets you edit HTML inside gmail, too. 

4. Use an Email Builder

As you can see, learning how to send HTML using code can become complicated. Firstly, you have to know how to code HTML. Secondly, you’ll need to know what kind of HTML tags you can and can’t use, you have to be able to host images on the web, and so on. 

To make it easier, you can use an email builder like Publicate that allows you to choose from an array of professional email templates and use a drag-and-drop editor to customize your email. 

There are a variety of templates to choose from for whatever purpose you intend. From Sales to Internal Communications to Events and Seasonal messages, there’s a template for any need.

For example, if you want to send out a sales email for a product or service, you can choose to use the Sales template. Then, all you have to do is add your product information, the sale amount, and customize your call-to-action button.

Then, when you want to send your email in Gmail, all you need to do is select the “Export to Gmail” button. There’s no coding required. 

What are Tips for Writing HTML Emails?       

When writing HTML emails, keep in mind the following tips for writing HTML emails. These recommendations will help you maximize the amount of people who can receive and read your emails as you intend. 

  • Use inline CSS rather than external style sheets 
  • Host images on a publicly accessible website 
  • Speaking of images, try to minimize the usage of them in general 
  • Use fully qualified URLs for every link (i.e. don’t start with www. Start with https://www.)
  • Incorporate alt text so if an image doesn’t load, users can still read what was meant to be in that space 
  • Write code in tables 
  • Set your max width to 600 pixels 
  • Test your email before sending 

Why Use HTML Email Builders?       

Instead of being bogged down in email code, you can spend that time strategizing and curating your email content. A tool like Publicate is an email builder that enables you to send HTML emails from your chosen email service provider. All you have to do is build your email and export the HTML for upload. 

There are hundreds of templates to choose from for whatever purpose you have in mind. With a template, you’ll have the layout ready to go and you can customize it as much or as little as you want to. Publicate makes email design simple and fast. And, after you send your creation, you can track its performance through analytics. Try it out for free! 

Closing Thoughts

Once you know how to send HTML email, you can see how an email builder can help you save time and operate more efficiently. There are many nuances to know about when writing your own HTML to send in an email provider. When you use an email builder instead, everything will be automatically set up and ready to go for the send.  A tool like Publicate is an email builder that enables you to send HTML emails from your chosen email service provider. All you have to do is build your email and export the HTML for upload.