How to Send HTML Emails in Gmail, Outlook and More
Try Publicate For Free Today
Start Now
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!
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:
We’ll look at each in turn.
(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.
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 this without having to touch a line of code, whereas with the next 2 options you will need to know your way around 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.
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.
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.
Start by copying the HTML’s body text, including <body and /<body> tags
Be sure to use Google Chrome because it’s the only browser that’s going to work to paste HTML inside Gmail.
Go to gmail.com, login, and click “Compose” in the top left panel.
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.
Right click and click “Inspect” to open the console window. This should open up the console with the HTML code of the webpage.
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
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.
Input your recipients’ email addresses and the subject line
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
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:
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
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.
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)
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.
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.
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.
Here are some other points you need to be aware of when sending HTML emails.
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://.
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.
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.
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.
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.
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.
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!
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..
