hcard-examples-in-wild
<entry-title>hCard Examples in the wild</entry-title>
This page is an informative section of the hCard specification.
The following sites have published hCards, and thus are a great place to start for anyone looking for examples "in the wild" for inspiration, or try parsing and indexing.
Turkish business telephone directory website [1] implements valid hCard and hReview-Aggregate for companies, contact information with geo tags and user comments.
examples by category
Want hCard? Get started with writing an hCard using the hCard creator to write up some contact information, validate and publish it, or following the hCard authoring tips to add hCard markup to your current site. Check out this section for similar examples of types of pages that benefit from hCard markup.
This section organizes examples into several rough categories as follows. If an example fits in more than one category, use the *last* matching category in this list that matches the specific hCard example(s) in the wild that you are trying to categorize.
- Individuals - one card per person, perhaps sort alphabetically by "family-name". People with their own hCards (typically) on their own site.
- Organizations - one card per organization, alphabetical by "fn". Organizations with their own hCard(s) (typically) on their own site.
- Institutions - which list more than one person, with a count estimating the # of hCards, e.g. 40k for Avon. Also indicate complexity of information supplied, eg. just name+number vs. complete details. Alphabetically sorted by "org" with perhaps a few individuals listed in a single sub-bullet, comma delimited, sorted by "family-name".
- Online Profiles - which host profiles for more than one person, with a count estimating the # of hCards, e.g. 10m+ for Flickr.com. Alphabetically sorted by company / service name.
- Online Venues - which provide listings for businesses or organizations, with a count estimating the # of venues, e.g. ~10k for Upcoming.org. Alphabetically sorted by service/site name, with perhaps a few specific venues listed in a single sub-bullet, comma delimited, sorted by "fn".
- Event Speakers - event pages where the speaker for the event is marked up with hCard.
- Speakers Listings - event sites' speakers pages where the speakers are marked up with hCard. Sort by date, sub-grouped by year. Most recent first. Perhaps a few individuals listed in a single sub-bullet each event, comma delimited, sorted by "family-name".
- Group Blogs - blogs with multiple authors marked up with hCard
- Wiki templates - community wikis that have templates that automatically generate hCards on pages
- Authors - pages about some other thing, such as books, perhaps reviews etc., which have marked up their authors with hCard
- Search Results - results pages from search engines (either generic or for people/organizations) that return people marked up with hCards.
- Listing Contact - contact information for a listing like a job posting, for sale offering, etc.
In addition there is a separate "UTF8 Examples" section that can be used to put another link to any hCard examples in the wild which exercise various non-ASCII7 / non-english characters for various property values.
As each section itself become quite large (we might be there already, once we sort through the above "Reviewed Examples"), it will probably be moved to a separate page, leaving its heading here in place, and replacing its contents here with a link to the separate page and perhaps a stats summary.
Individuals
Groupings alphabetically by "family-name".
Nicely styled:
- Nick Doty's home page has a very cleanly designed hCard with a map background indicating his current general geographic location.
- Jared Hanson's home page has a beautiful hCard with numerous ways of contacting him, and live updating of his online status on various messaging networks (uses javascript).
- Tim Van Damme's home page is a beautiful hCard (click the "About" tab to have Operator recognize it if it's not immediately active).
Simple web pages (sorted by family name)
B:
- David Baron's home page is marked up with hCard.
- Antoine Bernier's UID hcard:
- Dynamic VCF download link (through hcard parser)
- Dynamic QRcode (through hcard2qrcode)
- Dynamic avatar (through Gravatar)
- openID ready
- valid
- Eugen Busoiu's home page marked up with hCard
C/Ç:
- Tantek Çelik's home page includes an inline author hCard at the bottom of the page.
- Chawathe, Vipul hosts barely (in(head)line CSS) styled resume where hCard is part of by default visible bio-data section, and other (ancestral)sections may be kept visible by user.
- Christy Collins's home page is a detailed profile hCard.
- Christopher T. Cressman put his contact details on Who is Chris Cressman? and marked them up with hCard.
I:
- Steve Ivy with hCard and about page with the usual suspects + XFN on 'url's, photo.
J:
- Ryan Jones's home page is also an hCard.
M:
- Chris Messina has a page set aside with his contact details.
- Jordan Moore's blog contains an inline hCard.
R:
- Paul Roub has an hCard for himself on his blog's home page.
S:
- Michael(tm) Smith has an hCard on a page linked from his W3C staff page
- note lack of 'n' property but explicit use of 'given-name' and 'family-name' - more evidence we should drop the 'n' requirement (flatter is better) Tantek 04:10, 6 May 2011 (UTC)
T:
- Paul Tarjan's home page has hCard and is a rel="me" hub
- needs a few minor fixes: http://tr.im/hctvd (links to hCard validator results)
- Patrick Trettenbrein is the operator of skateboardspot.info and uses hCard on its "about" page for his contact info.
W:
- Chris Wilson has an hCard for himself on his about page.
- ...
Z:
- Aviran Zazon has an hCard on his company personal webpage (Staff).
Hidden! Invisible data is strongly discouraged, these examples have been grouped here in the hopes that the authors will someday make their hCards visible:
- A.J. Brown's home page includes a hidden hCard at the bottom of the page.
Former. URLs that seem to have broken.
- http://rogieking.com/#contact Rogie King's contact info was marked up with hCard and very nicely styled. (missing as of 2013-03-15)
- http://tomleo.com/about.html Tom Leo's about page had an hCard. (missing as of 2009-08-23)
- http://bogomil.info?l=en/ Bogomil Shopov had an hCard for himself (missing as of 2011-125)
Organizations
Sites for specific organizations with their own hCard on home page, or contact/about page(s). Grouped by country, sorted alphabetically (US first by convention). When this section gets too big we can make a separate business directory page.
US orgs
- Pinewood Shepperton plc includes an hCard on their home page, and several more upon clicking their "Contact Us" button (found via 2011-09-07 Pinewood Studios launch website created by Multiply press article).
- Primerica uses hCard on "Contact Primerica" page for home office address.
- RippleFxInc.com including both Ideas Blog @ Ripple FX and Knowledge Wiki @ Ripple FX use hCard markup and allows for vCard download on their page footers; because they care, the same is standard on every site they design.
- San Francisco Museum of Modern Art (SFMOMA)'s home page and pages in general have their address marked up in hCard.
- Unison Arts Center home page has an hCard with adr, geo, tel, email, and shows up with a search result rich-snippet with map pin address underneath, and call out map box using lat/long. (as tweeted 2012-07-18)
- Juixing.com - juice recipes uses hCard markup on recipe pages.
Australia orgs
- B&R Data Systems is an organisation hCard. We have also used the technorati tool to download as a vCard, which I think is useful for a business.
England orgs
- Alexanders Removals uses hCard for business address and contact details.
- Confidence 2 Smile uses hCard for business address and contact details.
- Counselling Psychologist London (counsellingpsychologistlondon.com) uses hCard for practice contact details for the page private psychologists in london
- Dovetail Dental uses hCard for business address and contact details.
- Electrical Certs uses hCard for business address and contact details.
- Guarantee My Rent uses hCard on their Contact us page
France orgs
- fnacspectacles, (online ticket office) uses hCard (vcard) and hCalendar (vevent) on events. Example Film Pierre Rahbi - Au nom de la Terre (note the english section on http://www.fnactickets.com/ does not support microformats)
- Vtcreative uses hCard in the footer on the home page.
Spain orgs
- Qoolife uses hCard for the hospitals, medical centres and online practices in their directory. E.g. Inst. Andaluz Neurología Pediátrica.
Germany orgs
- Hohenstaufen Gymnasium Kaiserslautern has hCard contact info
- suboptimal:
adr
subproperties are not recognized due to lack of explicit "adr" property.- evidence that has helped drive the flatter design of microformats-2 including h-card which permits adr properties, e.g. 'street-address' directly inside the hCard instead of requiring an explicit 'adr' in the hierarchy. - Tantek 01:46, 17 May 2012 (UTC)
- suboptimal:
Georgia orgs
- magiClima's contact page uses for customer contact information.
Israel orgs
- Art Prints contact information
- reincarcari cartuse uses hCard on contact listings.
- Troya Garden wedding hall contact information
- Sandwich Bar contact information
Italy orgs
- Webmotion - Siti internet uses hCard markup on their contact page.
- Numidia.it uses hCard markup for their contact info.
Netherlands orgs
- Kinderdagverblijf Kabouterbos, a day care / nursery that uses an hCard for their contact information (footer).
- Simourix At the top of each page you'll find our hcard. Only the address, phone number and email address are visible, but the actual hcard contains much more info.
Mis-sorted - this should be moved to a search results section:
- Michrome Marketing Lists (UK) use hCard on all their search result data. For example, Startup Companies in Bradford.
Old: (these sites used to have hCard, some may have gone offline)
- http://technorati.com Technorati (2004-2011)
- http://technorati.com/about/ about, http://technorati.com/press/ press, and http://technorati.com/about/contact.html contact pages with hCard and have "Add to Address Book" links with the http://feed.technorati.com/contacts/ Technorati Contacts Feed service.
- http://technorati.jp Technorati Japan (2004-2011)
- http://technorati.jp/about/contact.html contact page marked up with hCard.
Romanian orgs
- MyMan.ro - online store uses hCard markup on product pages.
Russia orgs
- Buy Rockwool uses hCard markup on its contact page.
Scotland orgs
- Hannies Antiques Ltd contact page has an hCard with geo too.
Uruguay orgs
- Cubox labs has a nice contact info hCard on their blog home page with address, email, telephone, twitter, github.
Institutions
- Mozilla's WebFWD experts and team pages have hCards, including microformats-2 h-card markup.
- O'Reilly's Conferences Team page has hCards for their team (~14) with a link to "Download the below contact info in vcf format" that uses the old Technorati contacts feed service to convert the hCards into vCards.
- needs updating to use H2VX instead of Technorati
- suboptimal: The "org" shouldn't be hidden with "display:none". Instead, use the include-pattern to include the "org" from text elsewhere on the page (to avoid duplicating the text).
with some problems:
- The IBM Employee Directory returns hCards in its query results
- E.g. search for Michael Kaply,
- but with some problems:
- invalid: no "fn" (would be addressed by the implied fn from n proposal)
- suboptimal: adr has no children and thus is not providing any data (may be addressed by the implied adr subproperties proposal)
- Bolton Museum and Archive Service uses hCard on its
- Contacts page
- invalid: Several have no "fn"
- and on each of its visitor attractions pages e.g. on the Hall i' th' Wood location page.
- suboptimal: "email" and "tel" properties mistakenly include "Email:" and "Telephone:" labels.
- Contacts page
- Stanford Online Accessibility Program has implemented hCard on every page
- suboptimal: positioned off screen via CSS
- Belkin Press Release - All Belkin press releases since October 2006 use hCard and vCard for company contact info.
- invalid: Example has 1 (out of 3) invalid hCard due to lack of "fn".
- Alexa Internet marked up its managers' page with hCard.
- suboptimal: job "title" is included inside within "fn" property.
- ...
old:
- 2005-2010(?) http://technorati.com/about/staff.html Technorati's Staff page had hCards for its employees (~31)
- E.g. http://technorati.com/about/staff.html?s=matthew_levine#matthew_levine Matthew Levine, http://technorati.com/about/staff.html?s=ryan_king#ryan_king Ryan King, etc.
Online Profiles
Online Venues
- Airfix Stockists and Distributors, e.g. [2]
- suboptimal:
street-address
contains street address, locality and region (e.g. "99 Hobs Moat Rd, Solihull, W. Midlands") - suboptimal:
postal-code
andcountry-name
include preprended commas - suboptimal:
fn
is used; should befn org
- suboptimal:
- Citysearch supports hCard (e.g. Tulio Ristorante in Seattle and Four Barrel in SF) nested inside an hreview-aggregate.
- easthampshire.org - hCard on events and events map - e.g. http://easthampshire.org/eventdetail/wine_society_evening/1372606 and http://easthampshire.org/eventmap/wine_society_evening/1372606 built by Callender Creates
- Foursquare supports hCard on venue pages, e.g. Four Barrel Coffee
- RinkLinks.ca: A Comprehensive Rinks and Arenas Directory for North America supports an hCards for listings in their directory.
- Sydney Directory Wiki supports hCard and geographical coordinates for locations, e.g. the Sydney Opera House.
- Webmaker (by Mozilla) supports hCard (and uf2 h-card) on venues of events, e.g. IndieWebCamp 2012 (as tweeted 2012-06-12).
Event Venues
- Eventbrite events all have their venues/locations marked up with hCard, e.g. Meet The W3C CSS Working Group!
- ...
Event Speakers
- O'Reilly fluent conference 2012 sessions, e.g. Federated Wiki Mashes Data in Your Browser have speakers marked up with hCard.
- ...
Speakers Listings
- ... lots more to add from events since 2007, e.g. every dConstruct etc.
2007
to-do: check 2007 presentations as they likely contain links to conferences that marked up their speakers page(s) with hCard.
2006
to-do: check 2006 presentations as they likely contain links to conferences that marked up their speakers page(s) with hCard.
2005
to-do: check 2005 presentations as they likely contain links to conferences that marked up their speakers page(s) with hCard.
- 12: Syndicate - Speaker List (hCarded version hosted at tantek.com)
- 10: Web 2.0 Conference 2005 -- Speakers (hCarded version hosted at tantek.com)
- 09: Web Essentials 05 - The Presenters original URL: http://we05.com/presenters.cfm (appears to have stopped working as of 2007-12-18, perhaps earlier). Web Essentials 2005 (we05) was the first conference to adopt hCard and hCalendar on their website and marked up all their presenters with hCard.
Group Blogs
- The IBM Shortcuts Podcast has authors marked up with hCard but has some problems:
- hidden: The root hCard element as well as every property contained therein is made invisible through a style attribute containing "position:absolute; visibility:hidden".
Wiki Templates
- Wikipedia
- Wikipedia-EN
- People. starting to roll-out on articles about people, for example Albert Einstein. The nature of Wikipedia means that there are a large number of templates to update (Albert's is "infobox scientist; there's also "infobox military people", "infobox musician" and so on, almost ad infinitum). DoB is only included if it's entered using a birth-date template, not as raw text.
- Places/orgs. starting to roll-out on articles about places, for example on UK Railway station template, e.g. Birmingham New Street station (includes Geo); and cities, for example New York. See above for note on Wikipedia templates.
- Wikipedia templates generating Geo
- hidden - for example List of Minnesota state parks; Alberta Highway 60
- Note also removal of hCard properties, e.g. List_of_Gaudi_Buildings
- Any Wikipedia editors willing to assist with updating templates should see Wikipedia's microformat project; Wikipedia templates generating hCards
- Unfortunately, other editors are already breaking some of the implementations on Wikipedia; e.g. Grand Canyon National Park; removal of "region" attributes
Wikipedia now has a template, hcard-geo, for in-line hCards with coordinates, such as that on Engine Arm
- Wikipedia-UK (Ukranian) starting to roll out on biographies e.g. Vadym Hetman
- Wikipedia-EN
- Wikiqueer
Authors
- TIME.com marks up articles with hAtom including authors with hCard, e.g. Like to Brag on Facebook or Twitter? That’s Because Self-Disclosure Is like Eating and Sex, Says Study
- LazyLibrary uses author hCard's on every book page. Example: [3]
- suboptimal Example has an fn of "Dorling Kindersley, David West Reynolds" which should be split into two hCards! (site would also benefit from hReview).
- ... many more (e.g. see unsorted list above, verify and move here)
Search Results
- University of Bath Person Finder results are encoded with hCards so you can easily create a vCard from any result.
- invalid: attempt to use Implied-N optimization where that's not possible,
- suboptimal: honorific-prefix could be explicitly marked up
- Error appears for external users only. Won't be fixed any time soon. -- PhilWilson 00:03, 28 Jan 2006 (GMT)
- YourTraces SocialSearch Try high results (hohe Relevanz) to get only websites marked with hcard as a person.
Listing Contact
Contact information for listings, e.g. job postings, items for sale, etc.
- Best Security Jobs is a UK jobs board that uses hCard on the homepage for job listings.
- reincarcari cartuse uses hCard on contact listings.
- search marketing executive published by SEOgadget.
- invalid url property - href of the url property element lacks http://, thus being invalid and linking to a non-existent relative URL.
- invalid XHTML - W3C validator reports this page as XHTML 1.0 Transitional (109 errors as of 2009-08-20).
UTF8 Examples
These examples all contain one or more characters in UTF8 that are outside the ASCII7 range and make for excellent test cases to make sure you are handling UTF8 properly throughout your hCard parsing and transforming. And especially if you are generating vCards, these test cases will help you make sure you are generating UTF8 vCards in such a way that can be recognized by UTF8 supporting vCard applications. Sorted roughly alphabetically (per Unicode).
- ImageConcept (ИмиджКонцепт) embedded UTF8 encoded hCard with Russian characters in «Contacts» page of website.
- Dmitry Dzhus embedded his UTF8 encoded hCard with Russian characters in «Author» page of his website.
- ECDLWeb.com encodes hCard and Geo information of ECDL and ICDL test centres in UTF-8. Test case for Central European (Czech, Hungarian etc.) and Cyrillic characters.
- Tantek's Thoughts encodes Ãelik as inline UTF8.
- Technorati Japan contact information encodes Japanese as inline UTF8.
- Vadym Hetman (Wikipedia-UK (Ukranian))
nickname only
These UTF8 examples only have UTF8 for the "nickname" property and are thus are a bit easier for testing than the previous examples.
- Various Wikipedia-EN articles, e.g. the "nickname" in: Noyabrsk (Russian), Thessaloniki (Greek), Kyoto (Japanese) and Beijing (Chinese)
non-HTML examples
missing
Examples that used to have one or more hCards but now don't seem to have any. If you do find one, please include direct links to at least two (assuming there are two or more) pages at the referenced site that have one or more hCards.
- Mapquest now supports hCards for business and places in the search results (e.g. search for Whole Foods in San Francisco)
- appears to be missing hCards as of 2008-09-07
- hCard
- hCard cheatsheet - hCard properties
- hCard creator (feedback) - create your own hCard.
- hCard authoring - learn how to add hCard markup to your existing contact info.
- hCard examples - example usage of various classes within hCard.
- hCard examples in the wild - an on-going list of websites which use hCards.
- hcard-supporting-user-profiles - sites with user profiles marked up with hCard - a very common example.
- hCard FAQ - if you have any questions about hCard, check here.
- hCard implementations - websites or tools which either generate or parse hCards.
- hCard parsing - normative details of how to parse hCards.
- hCards and pages - semantic distinctions between different hCards on a page, and how to identify each
- hcard-user-interface - techniques and issues surrounding user-interfaces to author, publish, and display hCards.
- hCard profile - the XMDP profile for hCard
- hCard singular properties - an explanation of the list of singular properties in hCard.
- hCard tests - a wiki page with actual embedded hCards to try parsing.
- hCard advocacy - encourage others to use hCard
- hCard "to do" - jobs to do
The hCard specification is a work in progress. As additional aspects are discussed, understood, and written, they will be added. These thoughts, issues, and questions are kept in separate pages.
- hCard brainstorming - brainstorms and other explorations relating to hCard.
- hcard-parsing-brainstorming - brainstorming specific to parsing of hCard
- geo brainstorming
- hCard feedback - general feedback (as opposed to specific issues).
- hCard issues - specific issues with the specification.
- vCard errata - corrections to the vCard specification, which underlies hCard.
- vCard suggestions - suggested improvements to the vCard specification.
- hCalendar examples in the wild