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>