How to show email addresses on the website to avoid spams?

Well, you can figure out a different way every day. Here's one using jQuery.

<a class="mail" href="mailto:[email protected]">e-mail</a>

Then handle the click with jQuery.

$('a.mail').on('click', function(){
    var href = $(this).attr('href');
    $(this).attr('href', href.replace('badmail.', ''));
});

The reason I like this is that I can let the spammers spam the dummy mail domain thinking they got yet another e-mail harvested. If I was maintaining my own spam filter, I could collect samples to my bad bucket.

Also, this approach allows you to render the page quite clean with dynamic data and simply have the javascript snippet only once on the whole site to handle the real user clicks.

Works also on mobiles.


In the past I have seen this done with javascript. Basically you assign the email address to javascript variables and change the contents of an element using these. You can also provide a fallback for users with javascript disabled which points them in the direction of a form if you need to. Here's an example

var user = 'foo',
    domain = 'bar.com',
    element = document.getElementById('email');

    element.innerHTML = user + '@' + domain;
    //OR
    //'<a href="mailto:' + user + '@' + domain + '">Email</a>'  

This way bots never see the email address as they do not load javascript.