How to markup email address and telephone number

Question

Using html5 semantics, what is the correct way to markup a contact part of a page i.e.:

<div class="contact">
    <h3>Contact me</h3>
    <p>Telephone: <span>01111 1111</span></p>
    <p>Email: <span><a href="mailto:[email protected]">[email protected]</a></span></p>
</div>

Answer 1

You could use microformats or microdata (e.g. using the syntax of schema.org) both are supported by the major search engines.

I can't say for sure which is the standart, because the time i looked a this there where many discussions around them. But think it is microdata that should be used. Personally i prefere microdata because they are more flexible with more options, and don't use classes.

EDIT Here are the specs for microdate from whatwg and the draft of w3c

Example using microdata with schema.org syntax

<div itemscope itemtype="http://schema.org/Person">
  <p>Telephone:  <span itemprop="telephone">01111 1111</span></p>
  <p>Email: <a href="mailto:[email protected]" itemprop="email">[email protected]</a></p>
</div>

For completion also an example with microformats:

<div class="vcard">
    <p>Telephone:  <span class="tel">01111 1111</span></p>
    <p>Email: <a class="email" href="mailto:[email protected]">[email protected]</a></p>
</div>