h-card-examples

From Microformats Wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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