Wednesday, 2 May 2018

Mailto Links Explained

Mailto Links Explained

What is a mailto link?

A mailto link, simply, is a link that enables the person who clicked it to send an email. It is created with HTML and, instead of opening a new web page or moving to another point on the same page, it activates the default email client on a user's computer.

If you want an example, here's one I prepared earlier:

Why should I use a mailto link?

The main reason for using mailto links is to save your readers time. It means they won't have to copy and paste your email address - or risk typos when they retype it. I often see blogging guides recommend you make the email address on your 'work with me' page a mailto link, for example.

On the other hand, it can encourage spam and baffle people who aren't familiar with the option - especially as it might force open an email client they rarely if ever use. It all comes down to what's best for you and your target audience.

How do I create a mailto link?

By using this HTML (you can copy and paste from the box):

<a href="">Link Text</a>

Or, if you want to turn an image into a mailto link (change the width attribute to the percentage of the screen width you want the image to cover):

<a href=""><img alt="description of your image here" src="URL of your image here" width="100%" /></a>

You might want to specify the subject line of the email, again to make it quicker for your readers and to help you differentiate which mailto link is generating interest. You need to use a question mark (?) at the end of the first parameter before going on to the next. To put spaces between the words you need to use '%20'.

<a href="">Link Text</a>

One last step I'll cover is adding in body text - the actual content of the email. Let's say you want to run a blog competition via email. You want the link text (AKA 'anchor text') to read 'Enter my competition', and the email subject line to read 'My Blog Competition'. In the body of the email you want 'Please enter me in the competition! :)'. Your HTML would look like this:

(Note that the second parameter and beyond needs to end in '&' before going on to the next.)

<a href="!%20:)">Enter my competition</a>

Or, if it's all getting a bit complicated, check out the mailto link HTML code generator over at Rapid Tables.

For more posts like this, click the picture below:
Blogging Guides

newerPageTitle olderPageTitle Home