Semantic Spam-Proof Email Display

Posted by Juice10 Mon, 13 Nov 2006 12:56:00 GMT

After deleting quite a bit of spam from my inbox I came up with a semantic way of displaying email addresses on a HTML page.

The concept is very simple, you add text within a <del> element to an email address needs to be removed from in order to show the real address.

Example

Your email address is: nobody@example.com Then you would add some text to scramble the email address from spam engines: nscrableobody@examscrableple.coremovem

To make sure that people can still see what the real address is wrap the fake text in the <del> element: n<del>scrable</del>obody@exam<del>scrable</del>ple.co<del>remove</del>m This would give you the following: nscrableobody@examscrableple.coremovem

This makes it quite hard to read even for the person wanting your email address. So to simplify this we could do two things:

  1. just add one bit of fake text to it: nobody@removeexample.com
  2. make sure the <del> element is hidden. This can be done multiple ways. You could add an inline style tag to the <del> element: <del style="display:none"></del>. Or you could give it a class: <del class="fake_email_text"></del> and add a little snippet of CSS to your page/css file: 
    .fake_email_text {
  display: none;
}

Pros

  • Screen readers will not read the text that is not being displayed by the CSS.
  • You can copy paste the email address.
  • It works with CSS, Javascript & images off.

Cons

  • It isn’t a link.

(If anyone can think of more just shoot)

Comments

Leave a response

  1. Wilfred said 5 days later:

    Nice one, simple, clean and (my pet peeve) semanticly correct.

  2. Mischa said 5 days later:

    Good idea. Only drawback is that this won’t work if you want to link to your email address.

    If you are using Textmate it has a built in way to obfuscate email addresses. Check out this screencast: http://macromates.com/screencast/html_text_transformations.mov

  3. Juice10 said 6 days later:

    Good idea. Only drawback is that this won’t work if you want to link to your email address.

    True, but the advantage you get is that you can copy/paste the email address into your email client (that wouldn’t be possible with an email address in an img.)

    Also the TextMate option works well but uses javascript so would be useless if someone had javascript turned of or where browsing the web via their cellphone.

Trackbacks

Use the following link to trackback from your own site:
http://juice10.com/blog/articles/trackback/20

RSS feed for this post trackback uri

(leave url/email »)