h-card-examples

(Difference between revisions)

Jump to: navigation, search
(stub)
Current revision (04:45, 18 May 2017) (view source)
(=== Site profiles === modernized examples, linked to web-sign-in)
 
(2 intermediate revisions not shown.)
Line 2: Line 2:
[[h-card]] examples is for particularly interesting and illustrative examples of h-card markup.
[[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 ==
== See Also ==
* [[h-card]]
* [[h-card]]

Current revision

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.

Contents

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-examples was last modified: Thursday, May 18th, 2017

Views