How to Send HTML Email

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

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

Most modern email clients send HTML email by default when the message is composed in the client itself. For example, Gmail and Yahoo! Mail both have WYSIWYG editors built-in that 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 trickier.

There are lots of editors you can use to create your HTML message, from those as simple as Notepad on Windows, to a fully featured application like Dreamweaver. Other good (and free) options include Notepad++, NetBeans, CoffeeCup, and Komodo Edit.

Steps for Writing Your 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 need to be publicly accessible on the internet.
  • Use the complete URL of the image in the <src> attribute, and test to make sure your image is displaying properly before you send your 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 either embed them in the HTML using the <style> element, or link to them with a fully-qualified URL.
  • It's best to avoid JavaScript because email clients usually disable these for security reasons. However, if you must use it, you should embed it with the <script> element.

Always use the full internet address for images and other resources you will be pulling into your HTML email so the recipient's client knows where to access them on the internet.

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 make it easier than others to use HTML created in a program or an HTML editor. Below are short tutorials on how to create and embed HTML in several popular email clients.

Gmail and Mac 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 in either of these two clients by copying and then pasting in your 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.

Thunderbird

By comparison, Thunderbird makes it simple to create your 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.

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. You might want to do this because it's 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 doesn't support it, they will get the HTML as plain text. Unless they are a web developer and comfortable with reading HTML (and even if they are, it's inconvenient to say the least), 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 just using it to send emails to friends and family, make sure they can read HTML emails.