h-card-examples

This article is a stub. You can help the microformats.org wiki by expanding it. - consider picking the best and most useful examples from hcard-examples, upgrading them to mf2, and adding them here below.

h-card examples is for particularly interesting and illustrative examples of h-card markup.

Instructive Examples

Authors of Pages and Posts

Author's probably have at least their name listed on a page or post. You may also have a link. E.g.

<a href="http://tantek.com">Tantek Çelik</a>

By adding h-card to such existing HTML, you can explicitly indicate the author's name and web address:

<a href="http://tantek.com" class="h-card">Tantek Çelik</a>

This could be displayed as:

Tantek Çelik

Note that when this example is parsed, the u-url property will be automatically implied. For more information, see microformats-2-implied-properties.

References to People and Organizations

A common pattern in blog posts is to link mentions of people's names to their blogs, and/or organizations to their home pages. E.g.:

<a href="http://meyerweb.com/">Eric Meyer</a> wrote a post 
(<a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a>) 
about an unintentionally humorous letter he received from the 
<a href="http://irs.gov/">Internal Revenue Service</a>.

By adding h-card to such markup, you can explicitly indicate both the person and the organization by name and URL:

<a href="http://meyerweb.com/" class="h-card">Eric Meyer</a> wrote a post 
(<a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">Tax Relief</a>) 
about an unintentionally humorous letter he received from the 
<a href="http://irs.gov/" class="h-card">Internal Revenue Service</a>.

This could be displayed as:

Eric Meyer wrote a post (Tax Relief) about an unintentionally 
humorous letter he received from the Internal Revenue Service.

a person who works for an organization

People often associate themselves with a company or organization that they work for. E.g.

<span class="h-card">
 <span class="p-name">Jeremy Keith</span>, 
 <span class="p-org">Clearleft</span>
</span>

Of course in this day and age, nearly everybody has a URL both for themselves and for their company. It's easy to add a URL for the person in the above h-card example:

<span class="h-card">
 <a class="p-name u-url" href="http://adactio.com/">Jeremy Keith</a>, 
 <span class="p-org">Clearleft</span>
</span>

But to add a URL to the company, there is no "org-url" property (nor should there be), instead, use modularity and a nested h-card for the company itself:

<span class="h-card">
 <a class="p-name u-url" href="http://adactio.com/">Jeremy Keith</a>, 
 <span class="p-org h-card"><a class="p-name u-url" href="http://clearleft.com">Clearleft</a></span>
</span>

Site profiles

Authors often indicate their identity on content hosting services using the URL to their home page, feed or profile on those services. By adding the u-url class to the links, these additional facets of identity can be published in an h-card as well.

Since these profiles represent the same person, it's best to mark them up with rel="me" for explicit identity consolidation. Such explicit identity consolidation also enables web-sign-in.

<li> <a rel="me" class="u-url" href="https://twitter.com/t">Twitter</a> </li>
<li> <a rel="me" class="u-url" href="https://www.flickr.com/people/tantek/">Flickr</a> </li>
<li> <a rel="me" class="u-url" href="http://upcoming.org/user/6623">Upcoming</a> </li>
<li> <a rel="me" class="u-url" href="https://github.com/tantek">Github</a> </li>

See Also

• h-card