Correct email address text format for website

Question

I have to display my email address on my website and I'm using this format email[at]domain.com for anti-spam purposes, but one of my colleague told me to use this format instead [e-mail] so the visitor could easily copy the address and paste it on the mailer. And I see some website also use image for their email address. So what could be the best way to do it?

email[at]domain.com, [e-mail] or use an image like this :

Thank you.

Answer 1

There are several ways to show your email details. For advanced thought you could use QR Code also. In the question that you've asked has relevance that the usage of email in the format like [e-mail] is taking a risk like the spam bots catch it from the html DOM.

You could use some scripts like this to protect.

<span id="email">email[at]domain.com</span>
<!-- Please enter a valid email address -->

<SCRIPT TYPE="text/javascript">
    var emailE='emailserver.com'
    var emailE=('yourname' + '@' + emailE)
    var emailAttr = document.getElementById("email");
    document.getElementById("email").innerHTML ='<a href="mailto:' + emailE + '">' + emailE + '</a>';
     //-->
</script>

There are also some encoding techniques you could adapt.

Answer 2

The correct way? Make it an URI (using the mailto URI scheme) and link it (using the a HTML element).

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

The best way? Depends on your criteria.

If you want to make the life of your visitors (including humans as well as bots) easier, use a link.
If you want to make the life of your visitors (including humans as well as bots) harder, obfuscate the address.

"Harder" can also mean impossible, depending on the way how you obfuscate. Many blind users will not be able to access your email address if you post it as an image. Some users with intellectual disabilities will not be able to swap [at] with @. Users without copy-paste functionality might not be able to remember your address when switching applications and having to enter it manually. Users without JavaScript might not be able to access some clever widgets. And so on.