View source

You do not have permission to edit pages, for the following reason:
The action you have requested is limited to users in the group Users.
You can view and copy the source of this page:
{{stub}} - 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.

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

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

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

This could be displayed as:

 [http://tantek.com/ Tantek Çelik]

Note that when this example is parsed, the <code>u-url</code> 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.:

<pre><nowiki>
<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>.
</nowiki></pre>

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

<pre><nowiki>
<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>.
</nowiki></pre>

This could be displayed as:

 ''[http://meyerweb.com/ Eric Meyer]'' wrote a post (''[http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/ Tax Relief]'') about an unintentionally 
 humorous letter he received from the [http://irs.gov/ 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.

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

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:

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

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:

<pre><nowiki>
<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>
</nowiki></pre>

=== 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 <code>u-url</code> 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|rel="me"]] for explicit identity consolidation. Such explicit identity consolidation also enables [[web-sign-in]].

<pre><nowiki>
<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>
</nowiki></pre>

== See Also ==
* [[h-card]]
Templates used on this page:
Template:stub
Return to h-card-examples.
Retrieved from "http://mt.microformats.org/wiki/h-card-examples"
Views

Microformats Wiki

Toolbox

Hey! You're not logged in
