How to Send HTML Email

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.

Steps for writing your HTML

If you're going to write your HTML messages in a different editor such as Dreamweaver or Notepad, 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 from the internet.
  • Write your image <src> attributes using the complete URL of the image. Be sure to test that the image displays 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 as email clients usually disable and will not execute these for security reasons. However, if you must use it, you should embed it with the <script> element.

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 will be viewable by most of your customers.

Embedding external HTML for specific clients

Some email clients make it easier than others to use HTML that was created in a different program or HTML editor. Below are some short tutorials for how to create or embed HTML in several popular email clients.

Gmail

Gmail does not want you to create HTML externally and send it through its email client. But there is a relatively easy way to get HTML email to work: use copy-and-paste.

  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. Paste the page contents into an open Gmail message window using Ctrl+V or Cmd+V.

Once you've got your message pasted into your Gmail message, you can do some editing, but be careful because you can delete some of your styles, and they're difficult to fix without having to repeat the steps above.

Mac Mail

Like Gmail, Mac Mail doesn't have a way to import HTML directly into the email messages, but there is an interesting integration with Safari that makes it easy.

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

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

  3. Open the HTML file in Safari. This trick only works in Safari, so you should get used to testing your HTML email in Safari even if you use another browser for most of your web browsing.

  4. Verify that the HTML email looks how you want it to look, and then import it to mail with the shortcut Cmd+I.

  5. Safari will then open the page in a mail client exactly as it's displayed in the browser, and you can send it to whoever you want.

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. View your HTML in code view so that you can see all the < and > characters. Then select all the HTML by using Ctrl+A (Windows) or Cmd+A (Mac).

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

  4. Open Thunderbird and start a new message.

  5. Click Insert and choose 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 will be inserted into your message.

One nice thing about using Thunderbird for your mail client is that you can the connect it to Gmail and other webmail services whose own email clients make it difficult to import HTML email. This way you can use the steps above to create and send HTML email using Gmail over Thunderbird.

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), 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, you should make sure they can read HTML emails before sending to them.