Skip to content

Instantly share code, notes, and snippets.

@BenWard
Created September 11, 2009 00:29
Show Gist options
  • Save BenWard/184951 to your computer and use it in GitHub Desktop.
Save BenWard/184951 to your computer and use it in GitHub Desktop.
<!-- 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. -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment