Sending mail as HTML

What is HTML e-mail?

HTML is the stuff dreams are made of. If you're a website developer, anyway.

HTML stands for HyperText Markup Language (in case you go to many pub quizzes), and is the basic language that webpages are assembled with.

It specifies what text should be treated like (for instance, a heading, a subheading, body text), and allows you to add pictures, videos, hyperlinks, sound clips, and when used with CSS the styling of all of this content to make everything look great.

CSS stands for Cascading Style Sheet, and is a standard for styling HTML documents. For instance, you can create a rule that makes all headings in a HTML file red. That's just one example, and you can actually do much more with it.

There are two links to W3C's guides to HTML and CSS at the bottom of this article if you're interested in learning more.

It's essentially sending a little web page as a message.

Sounds good? It is pretty nifty. There are though a few down-sides to sending with HTML too. Here's a rundown of the pros and cons:

Advantages of sending in HTML

• Ability to add various types of media to your e-mail
• Ability to format message
• Able to brand mail to match any of your own stationary
• Generally, a bit more interesting to look at

Disadvantages of sending in HTML

• Bigger e-mails
• Takes longer to send
• More likely to be seen as spam

Creating HTML messages

Using mail client tools

If you're using a recent version of Microsoft Outlook (2010 or 2013), HTML is the default format for new messages that contain anything other than plain text in the message body.

You can add HTML elements (images, links, etc) from the buttons in the ribbon accross the top of the window.

If you're using Apple Mail, you'll only be able to send in plain text and RTF (Rich Text Format - a format that allows you to set text styles to be a little more varied, but not as adaptable as HTML). You can send in HTML, but not using the default tools in the toolbar. To send HTML messages in Apple mail, you'll need the next section.

If you're using Thunderbird, it will, by default, automatically detect the content of your message and make it either plain text, RTF, or HTML format, depending on what's most suitable.

Using a ready-made HTML file

The above methods of composing a message using HTML are more for the casual composition of an ad-hoc message.

What if you have a ready-made newsletter to send out in HTML though?

Well, here's what you need to do:

In Outlook:

In your message window, click the "Insert" tab, and click the "Attach" button.

Select the HTML file you want to import, and click the small downward arrow to the right of the "Insert" button.

Select "Insert as text", to import the HTML.

Outlook likes to make changes to the imported HTML that may not always be welcome, so if you see such changes, you might want to consider using a tool such as the Bells & Whistles add-on, which allows you to import clean, untampered-with HTML.

In Apple Mail

The simplest way of sending a pre-made HTML file in Apple Mail is to first open it in Safari, Apple's own browser, click the "Share" button and click "Email this page".

This will open the page as a new message in Apple Mail. Be sure the "Send Web Content As" option is set to "Web Page".

In Thunderbird

All you need to do to add HTML to your e-mails in Thunderbird is click the "Insert" menu in the new message window, click "HTML\N", and then copy and paste the raw HTML markup from your HTML file to the HTML window in Thunderbird. Just click "Insert" to add it to your e-mail.

A couple of things to be aware of

• Not all e-mail clients display HTML the same way, and many don't display certain HTML elements, so keep it as simple as possible!
• All images, videos and other resources need to be referenced using absolute references, rather than relative ones, e.g. "http://test.com/image.jpg", not "image.jpg".

Links

More information on HTML: http://www.w3schools.com/html/

More information on CSS: http://www.w3schools.com/css/