JuiceBlog! comments on Semantic Spam-Proof Email Display

"Semantic Spam-Proof Email Display": comment by Juice10

Sun, 19 Nov 2006 16:25:52 PST

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.

"Semantic Spam-Proof Email Display": comment by Mischa

Sun, 19 Nov 2006 03:01:36 PST

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

"Semantic Spam-Proof Email Display": comment by Wilfred

Sat, 18 Nov 2006 05:34:58 PST

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

"Semantic Spam-Proof Email Display" by justinhalsall

Mon, 13 Nov 2006 04:56:00 PST

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: n~~scrable~~obody@exam~~scrable~~ple.co~~remove~~m

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

just add one bit of fake text to it: nobody@~~remove~~example.com
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)