2 Ways to Protect Your HTML Email Links (and Prevent Spam)

Table of contents:

Movie typography in 2026: why does it suddenly look so good?

Explore movie typography trends shaping 2026, from bold film fonts to cinematic branding, with inspiring examples and practical tips for creating impactful, screen-ready typography.

Grace Fussell 11min read 28 Apr 2026

Top 20 music video fonts for 2026 (+ bonus picks)

Design

Bold botanical design: the nature-inspired trend shaping creative work in 2026

Explore the bold botanical design trend shaping 2026, from lush patterns and floral design to branding, interiors, and nature-inspired creative projects rooted in biophilic aesthetics.

Grace Fussell 10min read 27 Apr 2026

In this tutorial, I’ll describe two straightforward techniques for protecting HTML email links from being scraped by spammers. Although these techniques cannot guarantee full success, they’ll give you an extra layer of protection.

Email Templates on Envato Elements

Before we dive in, don’t forget that you can download unlimited email templates with your Envato Elements subscription, 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!

What’s the Problem With HTML Email Links?

HTML email links do exactly what you’d 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—and perhaps other details—already filled in. They’re really convenient! However, the email address (either in text form in the link or in the href attribute) is readable by bots and scraping tools—even those operating through a proxy server— often leading to that email address finding its way onto spam mailing lists of all kinds.

The solutions we’re looking at aim to hide the email addresses from the DOM, so web crawlers cannot find them and put them into spamming lists.

A Specific Email Link Example

Let’s describe the problem in a bit more detail and then move on to the solutions.

The links won’t trigger in the embedded demos, so be sure to view them in the full page view (debug mode).

Consider the following example (debug mode):

How to Link Email in HTML

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

Notice also that the subject value is URL-encoded (the space is replaced by the %20). For example:

<a href="mailto:[email protected]?subject=General%20Questions">General Questions</a>

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.

HTML Email Link Solution #1: Encoding

In this first technique, we’ll represent all the characters of our email addresses with encoded entities. For example, the “h” character will be represented by the entity h. Different online tools can provide this functionality, like the one I used for our example.

Here’s the related demo (debug mode):

Here’s what that first link looks like now:

<a href="mailto:[email protected]?subject=General%20Questions">General Questions</a>

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):

This is a simple enough approach and will offer reasonable protection; it will prevent the majority of bots from harvesting the email addresses.

For WordPress websites, you can automate this process with the email address encoder plugin.

HTML Email Link Solution #2: JavaScript

For this second technique, we’re going to use a tiny bit of JavaScript. The href attribute value of our links will be empty by default. Additionally, each link will have data-part1, data-part2, and data-part3 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.

When the page loads, we’ll loop through all page links and update their href attribute values by combining the aforementioned attributes.

Here’s the related demo (debug mode):

Here’s what the first link looks like in this example—it’s very unlikely bots will be able to interpret our data in this form:

<a href="" data-part1="hello" data-part2="forecastr" data-part3="com">General Questions</a>

Again, if you need people to be able to read the email addresses, consider the following JavaScript solution (debug mode):

This technique will only work if JavaScript is enabled.

Conclusion

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.

There are also other methods that I didn’t cover here, possibly more effective, so be sure to let us know if you’re aware of any of them.

For example, one such rough solution uses pseudo-elements to create the email addresses and display them on the screen. However, its main limitation stems from the fact that pseudo-elements aren’t considered real elements, so people can’t select them and interact with them.
Another common approach takes advantage of Cloudflare’s Email Address Obfuscation feature.
Lastly, another technique might be to reverse how the email address links appear by using either CSS’s unicode-bidi property or JavaScript methods like the split() one. The disadvantage of this technique, though, is that if people select the email address and paste it into their mailing program, the email address characters will be displayed in reverse order. A quick and dirty solution to this is to disable text selection for the target links.

As always, thanks a lot for reading!

HTML Template Collections on Envato Tuts+

Kick off your next HTML website quickly and easily with one of the thousands of HTML templates we have at Envato Elements. Check out these collections!