How to Send HTML Email

It takes a few extra steps to send HTML messages in some email clients

What to Know

  • Gmail/macOS: Write email in HTML editor. Save to drive, then open in browser and copy/paste code into email body.
  • Thunderbird: Write email in HTML editor. Cpy code. In Thunderbird, go to Write > Insert > HTML. Paste code. Select Insert.

Most modern email clients send HTML email by default. Gmail and Yahoo! Mail, for example, both have built-in WYSIWYG editors you can use to write HTML messages. However, if you want to write your HTML in an external editor and then use it in your email client, it can be a little tricky. Learn how to create and embed HTML in Gmail, macOS Mail, and Thunderbird

There are lots of editors you can use to create your HTML message, from Notepad to Dreamweaver. Other options include Notepad++, NetBeans, CoffeeCup, and Komodo Edit.

Send HTML Email in Gmail or macOS Mail

Gmail and the Mail app on a Mac don't offer a way to compose an email in HTML within the client itself. However, you can send an HTML message in either of these two clients by copying and then pasting in HTML code created in another application.

  1. Write your email in an HTML editor. Be sure to use full paths, including URLs to any external files as mentioned above.

  2. Once the HTML file is complete, save it to your hard drive (it doesn't matter where).

  3. Open the HTML file in a web browser. If it looks as you expect (images visible, CSS styles correct, and so on), then select the entire page using Ctrl+A on Windows PCs, or Cmd+A on Macs.

  4. Press Ctrl+C (Windows) or Cmd+C (Mac) to copy the entire page contents.

  5. In Gmail or Mac Mail, start a new message. Paste the page contents copied above into the message's body using Ctrl+V or Cmd+V.

You can edit the text once it has been pasted into your new message, but be careful not to delete any of your styles or embedded images; they're difficult to fix without having to repeat the previous steps.

Send HTML Email in Thunderbird

Thunderbird makes it easy to create HTML and then import it into your mail messages.

  1. Write your email in an HTML editor. Be sure to use full paths, including URLs to any external files.

  2. Select all of the HTML code using Ctrl+A (Windows) or Cmd+A (Mac). To see the code itself, you may have to change the view from WYSIWYG to the raw HTML code view that reveals all of the HTML tags, etc.

  3. Copy your HTML code using Ctrl+C or Cmd+A.

  4. Open Thunderbird and Write a new message.

  5. In the message menu, click Insert and select HTML.

  6. When the HTML pop-up window appears, paste your HTML into the window by pressing Ctrl+V or Cmd+V.

  7. Click Insert and your HTML code will be inserted into your message.

Tips for Writing in HTML

If you're going to write your HTML messages in a different editor, there are a few things you should remember so that your messages will work.

  • Your images need to be hosted on a public website. They don't have to be on a web page, but they do need to be publicly accessible on the internet.
  • Use the complete URL of the image in the attribute, and test it to make sure your image is displaying properly before you send the message.
  • Do not use relative paths in links. You should use fully-qualified URLs for all links, just as with images.
  • If you are using CSS, you should embed them in the HTML code itself using the inline, embedded, or external style sheets.

Always use the full internet address for images and other resources you place in an HTML email. This allows the recipient's email client to know where to access the content on the web.

You should remember that email clients may not support advanced features like Ajax, CSS, or HTML5. The simpler you make your messages, the more likely they'll be viewable by most of your customers. Some email clients also make it easier than others to use HTML created in a program or an HTML editor.

The double exposure image of the businessman standing overlay with source code and programmer image and copy space. The concept of programming, cyber security, business and internet of things.
TimeStopper/Getty Images

An Advantage to Using Thunderbird As Your Email Client

You can connect email accounts such as Gmail, Yahoo! Mail, and many others to the Thunderbird email client and use it as your one-stop email app. This way it is slightly easier to insert HTML into a Thunderbird message, and you can send your outgoing messages through any of your connected email accounts.

Not Everyone Can Read HTML Emails

If you send HTML email to a person whose email client does not support it, they will get the HTML as plain text. Unless they are a web developer and comfortable with reading HTML the letter will be difficult to read at best, and little more than unreadable gobbledegook at worst.

If you're sending out an email newsletter, you should give your readers the opportunity to choose HTML email or plain text when they sign up. If you're merely using it to send emails to friends and family, make sure they can read HTML emails.

Was this page helpful?