By Andrew Westcott
Firstly, I'm assuming that you have some knowledge of html code and CSS, and write the code for your web pages yourself rather than letting some software do it badly for you. If not, why not?
When building web pages, there's a chance you may wish to include an e-mail address somewhere as a point of contact. Unfortunately there are bots roaming the Internet designed to harvest useful data such as e-mail addresses and phone numbers, along with any other tasty snippets which may come in useful or be sold to unscrupulous marketing companies. It won't be very long before any useful data has been harvested, from which point your inbox will begin to fill with unwanted messages, possibly rendering it unusable after a time.
This approach is pretty old, and an internet search will probably pull up hundreds of slightly different ways of doing this. Some methods are too simple and may be solved by modern bots, and others are perhaps unnecessarily complicated. Here I'll describe the method I use which gives excellent protection whilst being reasonably simple.
Anyway, moving on.
We need to take our e-mail address and break it up into pieces which individually cannot be harvested as a meaningful e-mail link. By way of example, here is the fake e-mail address email@example.com broken down into 4 bits:
The first concept to understand is that a letter, X for example, can be assigned a numeric value, say 5. In code, the X would be considered the 'variable', and the value assigned to it would be the 'value' hence in this case X = 5.
It's worth a mention that I'm suggesting 'var' here, rather than the more modern 'let' and 'const' to ensure that any pre-2015 browsers will recognise the code. Maybe in a few years it can be dispensed with, but not just yet.
In the example above, you can see the 4 variables, and the text string assigned to each one. Depending who you talk to, putting all the variables on one line may be more efficient, as all variables are processed at once. The image below is of the 4 variables being declared on one line if that's what you wish to do:
Note that the var statement is only written at the start of the line, each declaration is separated by a coma, and the end of the line is indicated by the semicolon as always required. Other than the slight syntax change, the declaration of variables is the same.
The more astute amongst you may have noticed that the variables aren't being declared in order, but are jumbled around a bit. This is optional, but I've done it to ensure that the e-mail address doesn't exist in a linear manner, where stripping out code could reveal the true address. There's no way a bot could get that information in this case.
Now we have the declaration of variables sorted out, we can place that bit of code safely out of the way within the html <head> </head> tags. When the browser loads the page, those variables will be declared, held in memory and can then be called unlimited times within the web page code.
The code has been enclosed within <p> </p> tags to enable styling using a class definer of your choice, and consists of a mixture of our previously declared variables, plus some other parts we didn't need to assign variables to, for example the entire <a href="mailto: string was left as-is. A spam bot won't get anything from that, apart from the digital equivalent of a headache.
Variables are just added in the code as they are, but each text string must be defined by being put in single or double quotes, and while either is acceptable, care must be taken to stick to just one or the other. As a double quote appears in the first and second text strings, single quotes have been used in this case to avoid breaking the code.
As a point of interest, the closing </a> tag may be picked up by the W3C html validator as an error. If you wish to get around this minor issue, the bits of problematic code can be broken down too, as in the snippet below.
So in a nutshell, the code writes the <a href="mailto: part and adds the text contained in the variables we declared earlier along with a couple of other text strings. If you examine it carefully, you'll see how it all logically comes together when the page is rendered: a nice, clickable e-mail address:
I can be contacted at this address:
Copyright © Andrew Westcott 2003 - 2024
I'm happy for anyone to use this material for private, non-commercial or educational purposes, but credit to the author must be given. For any other use please contact me for permission.