Join Chris Converse for an in-depth discussion in this video Encoding text with character entities, part of Design the Web: Creating and Protecting Email Links.
- View Offline
- One of the quickest ways to hide your email address in a webpage from a web crawler is to encode all the characters of your email address. Inside of your exercise files, let's open up option_3.html up in the text editor. In this file, like the others, we have a link to our style sheet. We have our article block, and down here, we have a paragraph element with an anchor tag inside and the href of the anchor tag links to mailto: and then email@example.com. Having this inside of an anchor tag makes this email address clickable and the mailto will tell your computer to launch your email program and put this email address in.
It's this particular string inside of an anchor link that is most easily captured by a web crawler. What we're going to do is we're going to take firstname.lastname@example.org and encode all of these characters. To more visually explain what we're going to be doing, we're going to be taking the mailto address inside of our anchor link, email@example.com, and we're going to represent all of the characters of that email address as encoded entities. We're going to use a website to do this, so the & # 102; is going to be for the letter F. Then each letter in the email address will be represented by these entities.
Inside of our code editor, let's come in here and select firstname.lastname@example.org. With this selected, let's come up to the edit menu. Let's come down and choose Cut. Then we'll switch over to a web browser. In your web browser's search field, we're going to search for email encoding. The results will give you a bunch of different websites that offer online tools that will take your email address and encode them into entities. I like the one here from Ohlone College and I have it loaded in my next tab. In whatever tool you choose, there's going to be a space where you can enter your email address. Here I'll select this @ohlone.edu, come up to the edit menu, choose edit paste, email@example.com, come down here are click on encode.
Here we can see all of the characters have now been converted to their entities. This looks really long because we have an anchor tag beginning and end and what they've done is they've put the email address in the label area as well as the mail to. Let's come in here and select after the colon all the way up through the ending quote. We have mailto: and then all of these characters represent the email address, firstname.lastname@example.org. With all of these selected, let's come up to the edit menu, let's come down and choose copy, switch back to our text editor.
Inside of the href, mailto:. Let's come in here and hit command or control V to paste in all that content. To see this you can open this up in a web browser. My particular text editor has a built in preview, so I'm going to use that. With the preview open, I can come over here, roll over this, this is still a hyperlink. If I click on this, this will bring up my email client and I can see the address in here, email@example.com. Let's close this. We still have the word email me here. If you want people to be able to see the address as well, let's come in here and select email me and let's replace that with the same encoded characters.
Then in the preview area, I can see the address now, firstname.lastname@example.org. Again, I can click it and now the address that I see in my email client matches the address I saw on the web page. If you're working on a website that's using some back end server language like php or asp or something similar, you'll want to look and see if those individual languages have some type of URL encoding function. Php, for example has a function called URL Encode. What you can do is put your full email address in the scripts and then when these get processed on the server, the encoded entities are what are actually sent down to the browser.