Difference between revisions of "h-card"
(→Examples in the wild: added a bunch of indiewebcamp attendee examples)
(explicit CC0+OWFa license)
|Line 5:||Line 5:|
h-card is the [[microformats2]] update to [[hCard]].
h-card is the [[microformats2]] update to [[hCard]].
== Example ==
== Example ==
Revision as of 00:33, 7 August 2013
<entry-title>h-card</entry-title> Tantek Çelik (Editor)
h-card is a simple, open format for publishing people and organisations on the web. h-card is one of several open microformat draft standards suitable for embedding data in HTML/HTML5.
Per CC0, to the extent possible under law, the editors have waived all copyright and related or neighboring rights to this work. In addition, as of 2022-01-20, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0.
Here is a simple minimal person example:
<a class="h-card" href="http://example.com">Joe Bloggs</a>
And a slightly more complete example:
<p class="h-card"> <img class="u-photo" src="http://example.org/photo.png" /> <a class="p-name u-url" href="http://example.org">Joe Bloggs</a> <a class="u-email" href="mailto:firstname.lastname@example.org">email@example.com</a> <p class="p-adr h-adr"> <span class="p-street-address">17 Austerstræti</span> <span class="p-locality">Reykjavík</span> <span class="p-country-name">Iceland</span> </p> </p>
h-card is a root class name that indicates the presence of an h-card.
For minimal examples where at most
u-photo are required (such as the first given above), only the root class name is needed — see implied properties.
For more complex examples, the root class name must be placed on an element which encloses all the desired properties, and then the properties themselves marked up using the classnames given below.
See microformats2 parsing specification to learn more about property classnames.
h-card properties, inside an element with class h-card:
p-name- The full/formatted name of the person or organisation
p-honorific-prefix- e.g. Mrs., Mr. or Dr.
p-given-name- given (often first) name
p-additional-name- other/middle name
p-family-name- family (often last) name
p-sort-string- string to sort by
p-honorific-suffix- e.g. Ph.D, Esq.
u-email- email address
u-url- home page
u-uid- unique identifier
p-adr- postal address, optionally embed an h-adrMain article: h-adr
p-street-address- street number + name
p-postal-code- postal code, e.g. US ZIP
p-country-name- country name
u-geo, optionally embed an h-geoMain article: h-geo
p-latitude- decimal latitude
p-longitude- decimal longitude
p-altitude- decimal altitude
p-tel- telephone number
p-note- additional notes
dt-bday- birth date
u-key- cryptographic public key e.g. SSH or GPG
p-org- affiliated organization, optionally embed an h-card
p-job-title- job title, previously 'title' in hCard 1.0, disambiguated.
p-role- description of role
u-imppper RFC 4770, new in vCard4 (RFC6350)
p-sex- biological sex, new in vCard4 (RFC6350)
p-gender-identity- gender identity, new in vCard4 (RFC6350)
All properties are optional.
h-card is a microformats.org draft specification. Public discussion on h-card takes place on h-card-feedback, the #microformats #microformats chat channel on irc.freenode.net, and microformats-new mailing list.
h-card is ready to use and implemented in the wild, but for backwards compatibility you should also mark h-cards up as classic hCards.
(stub, to be expanded)
p-adr can optionally embed an h-adr to cluster associated structured address properties. For example:
<div class="h-card"> <p class="p-name">Joe Bloggs</p> <p class="p-adr h-adr"> <span class="p-street-address">17 Austerstræti</span> <span class="p-locality">Reykjavík</span> <span class="p-country-name">Iceland</span> </p> </div>
Reserved properties (not used much, if at all, in practice):
p-tz- timezone offset, e.g.
<data class="p-tz" value="-0800">PST</data>
Note: use of 'value' within 'p-tel' should be automatically handled by the support of the Value Class Pattern. And for now, the 'type' subproperty of 'tel' is dropped/ignored. If there is demonstrable documented need for additional tel types (e.g. fax), we can introduce new flat properties as needed (e.g. p-tel-fax).
Examples in the wild
Real world in the wild examples:
- ... add uses of h-card you see in the wild here.
- Brett Comnes marks up his posts with h-card (example)
- Ben Werdmuller marks up his homepage and posts with h-card example)
- Sandeep Shetty marks his homepage and posts up with h-card and h-entry ([sandeep.io/101 example])
- spreadly marks up share permalink pages with minimal h-cards inside h-entry (example)
- Laurent Eschenauer marks his homepage profile up using h-card
- Tom Morris marks himself up with h-card as well as venues he’s checked into (example)
- W3Conf 2013 uses h-card for all the event speakers and notable attendees. The h-cards make particularly good use of implied name, url, and photo properties.
- SemPress is a WordPress theme that supports h-card, h-feed/h-entry and h-as-*
- The Pastry Box Project use h-card markup on their homepage and individual thoughts pages
- Tom Morris uses h-card and XFN - The XHTML Friends Network to markup his blogroll.
- Aaron Parecki uses h-card to markup both authorship and references to people in his notes permalinks, e.g. 2012/230/reply/1.
- Tantek Çelik uses h-card on his home page as well as within h-entrys on permalink pages to indicate authorship.
- Barnaby Walters uses h-card on his home page, as well as within h-entries for notes and articles, both to indicate authorship and also when mentioning people within the body of the notes.
- microformats.org at 7 years presentation with and h-card markup for people and organizations.
- Rise of the Indie Web hCards (from Personal Democracy Forum 2012 #pdf12 #pdf2012) has microformats2 h-card markup
- WebMaker by Mozilla has microformats2 h-card on event search (e.g. search near Portland Oregon) and event pages (e.g. IndieWebCamp 2012).
- WebFWD by Mozilla has microformats2 h-card markup on experts and team pages
- IndieWebCamp has microformats2 h-event markup with embedded h-cards for the organizers and the location.
- Mozilla Events page has microformats2 h-event markup with attendees marked up with h-card.
Test and validate microformats2 markup in general with:
- https://pin13.net/mf2/ - enter your markup directly
- https://pin13.net/ - enter a URL to a page to test where it says "Microformats Parser"
For backward compatibility, you may wish to use classic hCard 1.0 classnames in addition to the more future-proof h-card properties, for example:
<p class="h-card vcard"> <span class="p-name fn">Joe Bloggs</span>, <span class="p-org org">Awesome Nonprofit</span> ... </p>
vcard is a backward compatible root class name that indicates the presence of an hCard 1.0.
fn, org, and all the other backward compatibility hCard property class names are listed below.
Microformats parsers SHOULD detect the following root class name and property names. A microformats2 parser may use existing microformats Microformats Parsers to extract these properties. If an "h-card" is found, don't look for a "vcard" on the same element.
Compat. root class name:
Properties: (parsed as p- plain text unless otherwise specified)
fn- parse as
logo- parse as u-
photo- parse as u-
url- parse as u-
uid- parse as u-
adr- parse as
p-adr h-adrincluding compat root class
geo- parse as
p-geo h-geoincluding compat root class
bday- parse as dt-
key- parse as u-
title- parse as p-job-title
Reserved: (backward compat properties that parsers MAY implement, if they do, they MUST implement in this way:
rev- parse as dt-