A neat trick to hide an email address on a web page

• Eric Gregorich
• 16 November 2024
• Development

Using some simple HTML, you can obfuscate an email address (or any other text) from a link on a web page. But when clicked, it will still work! It uses HTML data attributes to allow you to create your email address broken and then combine the pieces together when the user clicks the link. This should hide the email from unwanted visitors and bots.

<a href="#" 
   data-name="name"
   data-domain="yourdomain" 
   data-tld="com"
   onclick="window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld; return false;">Text</a>

I found this trick from this discussion.