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:
just add one bit of fake text to it: nobody@removeexample.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.