A few weeks ago I wrote a post exhorting people to make their email addresses available on their websites. As part of that post, I included instructions on how to encode your address to add some level of protection against spammers.

It was only after I saw people implementing my suggestion that I realized many people don’t know how to make an email address clickable.

It’s great having your email address on your site, but how about making it so that someone can click on it and have it automatically open a new email with your address in the ‘to’ field? Sounds hard?…. It’s really not. Let me walk you through it:

This tutorial assumes that:

• You’ve read my other post and you know how to encode your email address
• You know how to add your email address to your sidebar or wherever it may be that you want it to appear.
• … and just for good measure, you’ve read this post about what email address to use.

So, you know how to put your email address on your site. You put the encoded email address on there and it comes out looking a little like this when people view the page: test@test.com

It would be much better though if it was clickable, like this: test@test.com.

Go on, try clicking on it.

Pretty cool, huh?

OK, here’s how it’s done:

After my previous post, you selected the location for your email address and simply put in the encoded address e.g. test@test.com.

What we need to do though is tell the browser of the person viewing your site that it’s an email address which should open up a new email when clicked.

To do that, we need to wrap it in some special code called HTML. I’ll walk you through it so you understand what we’re doing.

For the purposes of readability, I’m going to be using the uncoded email address but when you are putting it on your site, you should encode it.

The end result is going to look a little like this:

<a href=”mailto:test@test.com”>test@test.com</a>

If you understand what all that means, excellent, you can skip the rest and go implement it on your site. If not, here’s an explanation.

The code above can be broken down into three parts:

1. <a href=”mailto:test@test.com”>
2. test@test.com
3. </a>

Whenever something is wrapped in < and > the browser knows that there’s html inside that it needs to act on.

The html in part one says create a clickable link (a href=), make that link open a new email (mailto) and address that email to test@test.com

At the end of part one, there is a closing > letting the browser know that the html has finished and we’re now onto the part which displays on screen.

Part two (test@test.com) is the part which displays on screen. It will be displayed as a link because part one has told the browser that what comes next should be clickable. You can put anything you like in here. I suggest that you put your email address here (encoded, of course) so people can see what it is without clicking on it but you could alternatively put in some other text, for instance “Click here to email me”

Part three (</a>) simply tells the browser says “this is the end of the clickable link”.

Any text you put either before part one or after part three will not be clickable.

That may sound somewhat complicated but it’s really not. Just take it step by step and it will come out just fine.

Please leave a comment to let me know whether or not this has been helpful and whether or not it worked for you.

If you need any help, you can email me at: peter@hafchurch.org (see, it’s a clickable link 🙂 )