gistfile1.htm

<!-- Microformats hCard Example. -->
<!-- By Ben Ward - http://benward.me http://twitter.com/benward -->
<!-- Re: http://twitter.com/joelevi/statuses/3897539999 -->
<!-- See hCard: http://microformats.org/wiki/hcard#type_subproperty_values -->

<!-- Initial, incorrect Example: -->

<span class="tel voice work pref">+1-866-461-7001</span>

<!-- 
In current parsers, the `type` of the telephone number must be a child of `tel`, and cannot be declared on the same element as `tel` itself.

There are a number of ways you can mark this up:
-->

<!-- Alternatives -->

<!-- Simple, visible: -->

<span class="tel">
  <span class="type">Voice</span>,  <span class="type">Work</span> (<span class="type">Pref</span>erred):
  <span class="value">+1-866-461-7001</span>
</span>

<!-- Alternative, with the `type`s reduced in a valid abbreviation: -->

<span class="tel pref">
  <abbr class="type" title="Voice">V</abbr> <abbr class="type" title="Work">W</abbr> (<span class="type">pref</abbr>):
  <span class="value">+1-866-461-7001</span>
</span>

<!-- Alternative, with the `type`s not rendered, using the value-class-pattern -->
<span class="tel pref">
  <span class="type"><span class="value-title" title="Work"></span></span>
  <span class="type"><span class="value-title" title="Voice"></span></span>
  <span class="type"><span class="value-title" title="Pref"></span></span>
  <span class="value">+1-866-461-7001</span>
</span>

<!-- The microformats principals encourage you to put as much data visibly into your page as you can. That way, everybody can consume it.

Remember also that some parts (such as telephone `type` values) are optional. You don't _have_ to include them. You can mark up the following super-stripped-down telephone number, too: -->

<span class="tel"><span class="value">+1-866-461-7001</span></span>

<!-- The type and preference may not be essential or even useful information, depending on context. -->