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 the email in an HTML editor. Save to drive, then open in a browser and copy and paste the code into the email body.
  • Thunderbird: Write an email in an HTML editor. Copy it. In Thunderbird, go to Write > Insert > HTML. Paste the code. Select Insert.

Most modern email clients send HTML emails by default. Gmail and Yahoo Mail, for example, have built-in WYSIWYG editors you can use to write HTML messages. However, if you want to write 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. However, you can send an HTML message through either of these two clients by copying and then pasting the 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.

  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), 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 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 repeating 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, you may have to change the view from WYSIWYG to the raw HTML code view that reveals all of the HTML tags and other information.

  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 displays 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, embed them in the HTML code 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 way, the recipient's email client knows where to access the content on the web.

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 email recipients. Some email clients also make it easier than others to use HTML created in a program or an HTML editor.

A business person standing 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 an 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.

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

Was this page helpful?