Avoid Spam Online: How to Show your E-mail Safely

We all know about spam and up until recently there wasn’t an e-mail address shown on this blog (just a contact form) for this very reason. Most of us have also tried different methods of stopping spam bots picking up our favorite e-mail addresses (ever written [at] instead of @? Or shown your e-mail address as an image?). This article should outline a few different methods of showing your e-mail address publicly and safely – and hopefully without any impact to the usability of the end user.

Option 1: Hide Information in it#

The first option, is to include information in the e-mail address and hide it when the CSS is loaded. This example has two span elements containing rubbish information within the e-mail address.

joh<span class="hide">null</span>n.doe@ex<span class="hide">more</span>ample.com

.hide {
    display: none;
}

Result: johnulln.doe@exmoreample.com

The problem with this is that there is no way of specifying it as a mailto link.

Option 2: Show it through CSS Content#

The second option looked at is the opposite in that instead of hiding information when the CSS is loaded, you insert the e-mail address instead. This means that the e-mail address is stored in the CSS file (which some shout at – quite rightly). This can be achieved with a pseudo :after element with a content property.

<p class="option2"></p>

.option2:after {
    content: 'john.doe@example.com';
}

Result:

Like option 1, this has the downside that it can’t be made into a mailto link – but this method can’t even be selected by the user (or at least I can’t). So this method isn’t very accessible, but it is quite safe.

Option 3: Insert with JavaScript#

<p>Option 3: <a href="#" id="option3"></a></p>

var email = 'john.doe@example.com';
var id = 'option3';

// Plain JavaScript
document.getElementById(id).innerHTML = email;
document.getElementById(id).setAttribute('href', 'mailto:'+email);

// ...or with jQuery (inside $(document).ready())
$('#'+id).attr('href', 'mailto:'+email);
$('#'+id).html(email);

This method inserts the e-mail address into the element with JavaScript – which means it’s again not in the HTML and less likely to get picked up with spam bots – but it does mean if JavaScript is disabled by the user, they won’t see the e-mail address.

Conclusion#

Although only three options have been touched on, there are loads! Silvan Mühlemann wrote a great article on the subject comparing different methods on his blog – which is worth a read through.

What do you use on your website? Do you disagree with the options above? Let us know in the comments.