{"id":71480,"date":"2022-05-10T02:54:00","date_gmt":"2022-05-09T16:54:00","guid":{"rendered":"https:\/\/elements.blog-cms.envato.net\/?p=43451"},"modified":"2026-04-25T04:33:30","modified_gmt":"2026-04-24T18:33:30","slug":"protect-html-email-links","status":"publish","type":"post","link":"https:\/\/elements.envato.com\/learn\/protect-html-email-links","title":{"rendered":"2 Ways to Protect Your HTML Email Links (and Prevent Spam)"},"content":{"rendered":"\n

In this tutorial, I\u2019ll describe two straightforward techniques for protecting HTML email links from being scraped by spammers. Although these techniques cannot guarantee full success, they\u2019ll give you an extra layer of protection.<\/p>\n\n\n\n

Email Templates on Envato Elements<\/h2>\n\n\n\n

Before we dive in, don\u2019t forget that you can download unlimited email templates with your Envato Elements subscription<\/a>, to use with Mailchimp, Campaign Monitor, and many other Email Service Providers. Envato Elements also gives you access to thousands of other creative assets, like stock photos, graphics, video templates, audio, Photoshop actions, you name it!<\/p>\n\n\n\n

\"email<\/a><\/figure>\n\n\n\n

What\u2019s the Problem With HTML Email Links?<\/h2>\n\n\n\n

HTML email links do exactly what you\u2019d want them to do: when users click on them, they open the default email application and begin a new email with the contact email address\u2014and perhaps other details\u2014already filled in. They\u2019re really convenient! However, the email address (either in text form in the link or in the href<\/code> attribute) is readable by bots and scraping tools<\/a>\u2014even those operating through a proxy server<\/a>\u2014 often leading to that email address finding its way onto spam mailing lists of all kinds.<\/p>\n\n\n\n

\"spamming\"<\/figure>\n\n\n\n

The solutions we\u2019re looking at aim to hide<\/em> the email addresses from the DOM, so web crawlers cannot find them and put them into spamming lists.<\/p>\n\n\n\n

A Specific Email Link Example<\/h3>\n\n\n\n

Let\u2019s describe the problem in a bit more detail and then move on to the solutions.<\/p>\n\n\n\n

The links won\u2019t trigger in the embedded demos, so be sure to view them in the full page view (debug mode).<\/p>\n\n\n\n

Consider the following example (debug mode<\/a>):<\/p>\n\n\n\n

\"codepen<\/a><\/figure>\n\n\n\n

How to Link Email in HTML<\/h4>\n\n\n\n

Here we\u2019ve defined three regular links that, when clicked, instead of redirecting to a URL will open the user\u2019s default email client with the recipient\u2019s address and email subject prefilled. We do this by appending the mailto:<\/code> HTML scheme at the beginning of the href<\/code> attribute. As well as the subject<\/code> parameter, we can pass some things like the cc<\/code> and body<\/code>.<\/p>\n\n\n\n

Notice also that the subject value is URL-encoded (the space is replaced by the %20<\/code>). For example:<\/p>\n\n\n\n

<a href=\"mailto:hello@forecastr.com?subject=General%20Questions\">General Questions<\/a><\/code><\/pre>\n\n\n\n
Email addresses, when displayed like this, form a regular part of the DOM. And that is a problem. A bot can easily find them and target them with bulk advertisements and other unwanted stuff.<\/p>\n\n\n\n
HTML Email Link Solution #1: Encoding<\/h2>\n\n\n\n
In this first technique, we\u2019ll represent all the characters of our email addresses with encoded entities. For example, the \u201ch\u201d character will be represented by the entity h<\/code>. Different online tools can provide this functionality, like the one<\/a> I used for our example.<\/p>\n\n\n\n
Here\u2019s the related demo (debug mode<\/a>):<\/p>\n\n\n\n
\"codepen<\/a><\/figure>\n\n\n\n
Here\u2019s what that first link looks like now:<\/p>\n\n\n\n
<a href=\"mailto:hello@forecastr.com?subject=General%20Questions\">General Questions<\/a><\/code><\/pre>\n\n\n\n
If you want to replace the text links with the actual email addresses so people can see and select them, all you have to do is replace them with the encoded entities like the demo below (debug mode<\/a>):<\/p>\n\n\n\n
\"codepen<\/a><\/figure>\n\n\n\n
This is a simple enough approach and will offer reasonable protection; it will prevent the majority of bots from harvesting the email addresses.<\/p>\n\n\n\n
For WordPress websites, you can automate this process with the email address encoder<\/a> plugin.<\/p>\n\n\n\n
HTML Email Link Solution #2: JavaScript<\/h2>\n\n\n\n
For this second technique, we\u2019re going to use a tiny bit of JavaScript. The href<\/code> attribute value of our links will be empty by default. Additionally, each link will have data-part1<\/code>, data-part2<\/code>, and data-part3<\/code> attributes. The value of the first attribute will correspond to the user, the value of the second one to the domain name, and the value of the third one to the domain extension.<\/p>\n\n\n\n
When the page loads, we\u2019ll loop through all page links and update their href<\/code> attribute values by combining the aforementioned attributes.<\/p>\n\n\n\n
Here\u2019s the related demo (debug mode<\/a>):<\/p>\n\n\n\n
\"codepen<\/a><\/figure>\n\n\n\n
Here\u2019s what the first link looks like in this example\u2014it\u2019s very unlikely bots will be able to interpret our data in this form:<\/p>\n\n\n\n
<a href=\"\" data-part1=\"hello\" data-part2=\"forecastr\" data-part3=\"com\">General Questions<\/a><\/code><\/pre>\n\n\n\n
Again, if you need people to be able to read the email addresses, consider the following JavaScript solution (debug mode<\/a>):<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
This technique will only work if JavaScript is enabled.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
In this tutorial, we examined two quick methods to protect our HTML email links and fight against email spamming. As I said at the beginning, none of them can guarantee full spam protection, and each one does have downsides. Of course, each bot collects data differently, and thus their efficiency varies. What we can at least do is try different methods for making their job more difficult in stealing our email addresses.<\/p>\n\n\n\n
There are also other methods that I didn\u2019t cover here, possibly more effective, so be sure to let us know if you\u2019re aware of any of them.<\/p>\n\n\n\n