h-card is the microformats2 vocabulary for marking up people, organizations, and venues on web sites. Colloquially many will use the term "h-card" as a synonym for an online equivalent of a business card since it often contains identity information including name, address, photo, and related contact information.
Each IndieWeb site should have an h-card on the homepage, preferably containing at least name, url and photo (or logo) properties — just these three cover most h-card usage on the IndieWeb, for example, putting a name and face to comments or URLs.
You can make a simple h-card that does the above with two elements and one classname, for example:
<a class="h-card" href="http://waterpigs.co.uk"> <img src="/photo.png" alt="" /> Barnaby Walters</a>
The microformats website has a fill-in-the-blanks h-card generator that will allow one to input all of the data they'd like to display and it will automatically mark all of it up properly so that one can cut and paste the semantic HTML into a web page.
You can include an h-card to someone else embedded in a post. The best approach to embedding an h-card is to use a minimal amount of mark up such as:
<a class="h-card" href="https://indieweb.org/User:Aaronparecki.com">Aaron Parecki</a>
If you want to send the person an @ mention in the post us the person-tag.
You can check your homepage h-card for completeness and common mistakes using these validators:
From a pure user features perspective, and assuming no invisible metadata, how are the following accomplished (that is, with h-card)?
- I'd like to show some personal profile information (for example, name) on my posts, but not my picture. I may want to show additional profile information on another page, for example. /about. That may include my picture, or it may not (including icon).
- When I comment, like, repost, or rsvp to someone else's post, and they render that response (comments-presentation), I'd like to let them show my additional profile information, including my picture, if they choose. authorship handles some of this, but maybe not all, for example, the case where I don't show my picture anywhere on my site.
- Similarly, when I log into a site like this wiki with IndieAuth (etc.), I'd like the site to be able to discover my additional profile information, including my picture, to show on my profile page, activity, or other appropriate places. representative-hcard-parsing gets close, but not all the way. #Brainstorming below is a straw man extension that could help.
From an h-card specific viewpoint, here are some additional issues / questions:
- Some people (e.g. GWG, Kartik, User:Snarfed.org, User:Mowens.com, gRegor Morrill) would like a way to include both a minimal h-card on a page *and* a link to a "complete" h-card with more information, for example, contact details or photo. authorship and representative-hcard-parsing are both related but slightly different, and both currently only use the inline h-card if it's available. The inline h-card could include a link to the expanded h-card.
- Along the same lines, some people (e.g. User:Snarfed.org, User:Mowens.com, gRegor Morrill) would like to make some parts of their h-card invisible everywhere, but still available to programmatic consumers. Examples include rel-me links to some silos, public encryption key. Related: antipatterns#invisible_metadata
- On my site currently, my author hCard on each post is invisible because I do not feel the need to display my photo, URL, and name on every post. This would be different if it was a multiple-author site. gRegor Morrill
- I too have made the h-card invisible on my home page because I don't want details to show there for design reasons. Jeremy Cherfas
What should be a
u-url on the h-card and what shouldn’t?
- The specification says
u-urlis for the identity’s “home page”.
- hCard authoring’s Link it up section recommends to add “links to your website, your social network profiles and other sites that represent you specifically to your hCard with the class name
url.” (Note that this is linked to indirectly by h-card as h-card-authoring has yet to be written.) And goes on to show an example where rel-me links are given the class.
There are also examples of both readings:
- Aaron Parecki only includes his homepages
w7apk.comas url properties on his homepage h-card. External profiles can only be found through rel-me parsing.
- Tantek Çelik includes all his rel-me links as url properties on his homepage h-card.
What should the general advice be? Are silo identities still homepages to be marked up with
Martijn van der Ven
Martijn van der Ven (self proclaimed master of “the art of the h-card”) has an extensive h-card on http://vanderven.se/martijn/, including experimental properties like dietary preference, experimental formats like h-measure, a
dt-bday specified to the minute, and more!
- If people take away anything from his card, he would like it to be the pronoun mark-up.
gRegor Morrill: I have an h-card in the footer of each h-entry on gregorlove.com, but would like to experiment with marking up my existing information on my about page and linking to that from each post.
One possible solution for the partial plus complete h-card issue is to include a rel-me link to the full h-card and *not* mark up the partial profile information on the home page as an h-card. The representative-hcard-parsing algorithm would then follow the rel-me link and use its full data. It doesn't seem ideal, but it'd work.
One problem with this is that the home page usually has many rel-me links, for example, to silos, and we don't yet have a way to denote the "canonical" one. gRegor Morrill, User:Mowens.com, and others have proposed using u-uid and/or a new rel-canonical property for this.
- I wonder if there is anything we can do with
uidto specify which h-card is the most complete / canonical identity h-card. — Martijn van der Ven