How to Send HTML Emails in Gmail, Outlook and More

30.12.2023
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
30.12.2023
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 the Different Ways to Send HTML Email in Gmail?

You’re here because you want to know how to send HTML in Gmail. Although some of the options can be tricky, not all of them are. They include:

  • Copy And Paste Existing HTML
  • Use Chrome Developers Tools
  • Use an Email Builder

We’ll look at each in turn.

Why is Importing HTML into Gmail Not as Easy as Copy & Paste?

(Unless you use an email builder)

This is because if you paste HTML directly into Gmail or any other email client, it will paste the HTML as text, which is not what you want. You want a beautifully rendered newsletter, not a bunch of text layed out in HTML tags.

Thankfully there are a couple of ways around it, with varying degrees of technical complexity and time needed.

We will cover all of the possible methods in this post, but I would guess you are looking for the simplest one that is going to save you the most time and effort, so let's start there.

1. Use an Email Builder

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 that all work seamlessly with Gmail, Outlook or any other client. It also has a powerful drag-and-drop editor so you can easily customise your email.

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

There are also many other benefits of using an email builder instead of having to code your own HTML email.

  • All of the images and media is automatically hosted for you
  • You have full editing control, and can even crop and align images right inline in the editor

  • With an email builder, getting your HTML email into into Gmail, or Outlook is actually as easy as copy and paste, or if you install one of the integrations then you’ll find all of your newsletters ready to be used right inside your Gmail or Outlook.
  • You can add various media types to your newsletter, from image, to GIF, to video and even files like excel or word documents
  • Good email builders will also have libraries of royalty free  images, GIFs and prebuilt modules so you don’t have to spend long finding the right assets for your newsletters
  • All of the engagement features like buttons, social links, social share, dividers, menu items etc are all built in so you can just drag to add them, rather then having to code the elements from scratch

  • The HTML code for the email is rigorously tested across 57 email clients and mobile optimized so you can be sure that whatever you create look and performs great wherever it is read
  • With an email builder, getting your HTML email into into Gmail, or Outlook is actually as easy as copy and paste, or if you install one of the integrations then you’ll find all of your newsletters ready to be used right inside your Gmail or Outlook.

All of this without having to touch a line of code, whereas with the next 2 options you will need to know your way around HTML.

2. Copy And Paste Existing HTML

You can create HTML yourself and copy and paste it into Gmail, but you will have to make sure you copy rendred HTML, not just the HTML itself. 

Keep in mind that if you’re choosing this route, you also 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 also HTML tags that might not be supported. Here are some tags that aren’t supported.

You can find the full ‘how to process’ for this method further below.

3. Use Chrome Developers Tools

You can edit HTML directly in the console of Google Chrome by using the “Inspect” element in your Gmail message window. In this case you have to already have the correct HTML coded and ready to paste into the console. 

Let’s take a look at how to use the chrome developer tools to insert HTML directly into the Gmail compose Window.

How to Send HTML Email in Gmail?   

This technique is a bit of a hack, as you are manipulating the code in the browser through the console, rather than adding content to the compose window in Gmail. But the end result is the same. 

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 The Compose Window

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

4. Add Placeholder Text 

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

5. Open The Inspect Window

Right click and click “Inspect” to open the console window. This should open up the console with the HTML code of the webpage. 

6. Find & Select The Placeholder Text

Find the DIV that the placeholder text you previously entered in the Compose message box is located, and right click and select “Edit as HTML” That’s where you’re going to paste the HTML you had copied from Step 1

7. Paste HTML 

Paste your HTML in the DIV that the placeholder text is in. You can use shortcuts like Command and V (Mac) or CTRL and V (Windows). Once you have pasted the HTML you should see your rendered newsletter in the compose window.

Now, close out of the inspect box in the top right corner. 

8. Add Recipients And Subject Line

Input your recipients’ email addresses and the subject line 

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, and repeat the process again.

Remember with this method you will need to ensure all images and media are also hosted on a server for it to work.

Now lets take a look at the detailed steps for the 2nd mehod, of how to Copy & Paste Existing HTML.

Picture source Unsplash

How to Copy and Paste HTML Email Content?   

If you code your HTML email in an text editor, then you can paste the HTML into either Gmail or Outlook, but it is not quite as simple as copy and paste.

Here’s how that can be done: 

1. Save HTML

Start by coding your email and then saving it. All Text Editors (where you create your HTML) have an option to either “save” or “download” your HTML file. Here’s how to save your creation:Windows: File > Save As > (enter a file name) followed by .html > Save as Type > All Files > Savethat aren’t supported.

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

Remember how we said you can’t just paste HTML into an email client like Gmail or Outlook? Well that is why you have to open it as a webpage in your browser first, so you can copy the rendered HTML, not the HTML code itself.

To do that, 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. Paste Your Content 

Paste the previously copied rendered HTML in the message body and you should see your rendered newsletter in the compose window.

Remember you will need to ensure all images and media are hosted on a server for this to work and for them to send with your newsletter.

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

Proofread, and send! (Remember: you may want to send to a test list first to perform a spam test). 

Remember, if things don’t quite look right you’ll have to go back to the text editor and edit your HTML, save it, render it and then copy it over again.

Rather than having to code the newsletter yourself, host the images and media yourself, and go through these lengthy processes, you can leverage a web-based email builder like Publicate that is equipped with HTML email templates and a powerful newsletter editor that exports directly to Gmail and Outlook.

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.

What are HTML Emails?

Here are some other points you need to be aware of when sending HTML emails.

1. Code-Based

You can send HTML emails from email clients like Gmail, but you need to know how to code HTML and use a text editor, unless you use a purpose built email builder.

When doing so, keep in mind that HTML renders differently across email providers, so you want to code in a way that your email renders correctly for the maximum number of people possible. 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. You also need to be aware that you will have to host your images on your own server, again unless you use a purpose built email builder.

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. 

You will also want to make sure that you test your newsletter renders across various email clients and platforms, as all your readers don’t just use Gmail.

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 optimise your email send to actually be delivered. 

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 maximise 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 ensure they are optimised file sizes so as to keep the email size to a minimum
  • 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 across multiple clients before sending to ensure the it renders well for all your readers

Why Use HTML Email Builders?    

Instead of being bogged down in email code, you can spend that time curating your email content and ensuring your newsletter is engaging for your readers. A tool like Publicate is an email builder that enables you to build and send beautiful HTML emails from your chosen email service provider, without having to code.

It also gets around all of the limitations from the other methods as images and media are automatically hosted, it is rigorously tested across all email clients so you can be sure it looks great for your readers, and you can export what you create with the click of a button to wherever you want to send it, including Gmail and Outlook.

The powerful email builder also makes it super easy to create beautiful engaging newsletters and 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 understand what is involved in order to create and  send HTML email, you can see how an email builder can really 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, it eliminates the multistep processes, having to host things on your own server and most importantly, the need to code the newsletter itself..  

A tool like Publicate is an email builder that enables you to create beautiful newsletters and send HTML emails from your chosen email service provider. All you have to do is build your email and export the HTML to your preferred email client with one click..