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.
Your email address is: firstname.lastname@example.org
Then you would add some text to scramble the email address from spam engines: email@example.com
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:
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: firstname.lastname@example.org
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:
Screen readers will not read the text that is not being displayed by the CSS.