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)

Posted in email, html, css | 3 comments | no trackbacks