hcard-examples-in-wild
hCard Examples in the wild
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" to try parsing, indexing, organizing etc.
If people or organizations on your site are marked up with hCard (even just your own contact information), feel free to add it to the top of this list. Please be sure to include at least one URL to a page on your site that includes actual hCard markup. Examples added without a URL to a page with hCard markup may be removed.
Want to get started with writing an hCard? Use the hCard creator to write up some contact information and publish it, or follow the hCard authoring tips to add hCard markup to your current contact page.
Buttons
You can use these buttons on pages with hCards. See buttons#hCard for any recent additions.
- (mirror: )
- CSS-powered button, as evidenced at microformat badges @ re-run
Examples To Act On
New Examples
Please add new examples to the top of this section so they can be reviewed! Please check back after a few days, to see if anyone has found any problems with the examples supplied.
- Nutscene Ltd uses hCard on their main contact page.
Examples with some problems
Entries may be moved here if there's a problem with the way hCards are used on the page concerned. If the page is yours, and you want to improve it, see the hCard FAQ, or raise any queries on hCard Issues or the mailing list, where people will be happy to help you.
Examples may also be sorted into the grouped sections below, and noted in a subsection with minor (unTOC'd) heading: with some problems: (e.g. see Institutions). That way it is easier to keep similar examples grouped together, even if they have problems, so that when the problems are fixed they can simple be moved up a little rather than having to be sorted into the proper group.
Please consider distinguishing problems for each as either:
- invalid - the hCard is invalid and cannot be parsed by a parser for any information due to the problem.
- suboptimal - the hCard is technically valid, yet either has one or more properties that have no data due to a markup problem (e.g. adr without children), and/or there is data inside the hCard markup which could be marked up with an hCard (sub)property but isn't.
- hidden - one or more the hCard's (sub)properties are hidden via CSS or other mechanism and are thus potentially out-of-date or vulnerable to being labeled as spam by search engines.
hCards with some problems:
- reefscape.net Personal blog page that has a hidden hCard in the about section on every page. A vCard can be downloaded using the Technorati service.
- Hidden.
- www.cosmotourist.com and www.cosmotourist.de A new German and English portal around travel tips. Using hidden hCard for hotel listings, wherever address data is available.
- Hidden.
- Venn Communications System uses a hidden hCard sitewide.
- Hidden.
- Last FM has hCards hidden on their profile pages e.g. [1].
- Hidden.
- Kriss Watt has hidden an hCard his blog footer.
- Hidden.
- Frances Berriman has a hidden vCard in the footers of her website.
- Hidden.
- CandleScience Candle Supply added a hidden hcard sitewide.
- Hidden.
- Meryl K. Evans has a hidden hCard on her homepage.
- Hidden.
- High Flyers Careers, India's first flight-crew placement agency uses microformats for their corporate information page. Using standards couldn't be easier or better.
- Has honorific prefixes as part of "fn", rather than marked up separatley.
- Spotstor.com eg - [2] uses hCard on profile pages (where user has elected to show contact information).
- Stanford Online Accessibility Program has implemented hCard on every page
- positioned off screen via CSS Andy Mabbett 15:09, 9 Apr 2007 (PDT)
- Belkin Press Release - All Belkin press releases since October 2006 use hCard and vCard for company contact info.
- One of the three hCards in invalid (no "fn") Andy Mabbett 16:50, 2 Apr 2007 (PDT)
- Ray & Berndtson, a global recruitment firm, are listing all of their offices worldwide as hCards, e.g UK offices.
- All invalid: no "fn". Andy Mabbett 07:05, 31 Mar 2007 (PDT)
- The imprint of Hohenstaufen Gymnasium Kaiserslautern
- No
adr
. Andy Mabbett 12:10, 3 Mar 2007 (PST)
- No
- Alexa Internet marked up its managers' page with hCard.
- Person's job title within "fn". Andy Mabbett
- Natural England (new UK government agency, formed 2006-10-01).
- No "fn" - which makes it invalid.
- G3:2 uses hCard with geo tags in the copyright and on the about me page
- Address data is hidden using CSS.
- ZDnet Contact Us Page supports hCard.
- by James Myers and David Long
- Images and e-mail addresses are hidden; telephone numbers do not comply with E.123
- Gerard Braad has published an example on his profile page that is almost consistent with his original vCard file. Also progress is made for transforming his FoaF file to a hCard encoded representation (also done for my spouse:Yong Yuan)
- (2005-09-27) PASSED, PASSED
- WARNINGS
- uses 'n given-name' and 'n family-name' instead of nesting the given- and family- names inside the 'n'
- has one 'tel' value with a bunch of values stuffed in
- probably more problems --RyanKing 17:19, 5 Jan 2006 (PST)
- Cori Schlegel discusses how he has updated his contact page with hCard
- INVALID - using 'prefix' instead of 'honorific-prefix' and type's in classnames (in both adr and tel) and has two photo's (the second could be 'logo') --RyanKing 15:15, 5 Jan 2006 (PST)
- The good ship Leonid Miloslavskiy spotted in the North Atlantic
- INVALID --RyanKing 00:50, 27 Oct 2005 (PDT)
- class="family" should probably be family-name
- the "n" property is missing and the "n" optimization can't be applied
- the first geo propery is empty, the second one is invalid (i.e., it doesn't contain lat/long)
- INVALID --RyanKing 00:50, 27 Oct 2005 (PDT)
- Landsbanki Føroya
- INVALID - using embedded RDF/XML invalidly
- University of Bath Person Finder results are encoded with hCards so you can easily create a vCard from any result.
- ERROR - attempt to use Implied-N optimization where that's not possible. --RyanKing 14:29, 5 Jan 2006 (PST)
- Error appears for external users only. Won't be fixed any time soon. -- PhilWilson 00:03, 28 Jan 2006 (GMT)
- Richi Jennings has put up his attempt
- INVALID, missing "fn"--RyanKing 12:47, 5 Jan 2006 (PST)
- Yellow Pencil Using microformats to present company contact information
- First hcard has empty "fn" and no "n". "fn" should be with "org" -- ScottReynen 21:29, 19 Jun 2006 (CST)
Reviewed Examples
Reviewed New Examples which are fine can be moved here to indicate that they've been reviewed. Or take the next step and note which type of example in the wild each of these are, and then please move them to the "Grouped Examples" sectionl
- Greg Bays, the author of vCardPlus! has made his sites vCard display page hCard complaint.
- New Frontier Web Solutions uses hCard on their front page along with a link pointing to Brian Suda's X2V.
- shifting pixel photoblog has published an hCard.
- Aiden Kenny hasn't published his hCard yet, but he has published his hCard icon:
- Andy Hume uses hCards to mark-up the names and URLs of commentors on his blog, e.g. his blog post on "Using hCards in your blog".
- BidClix's Contact BidClix page has it's contact info marked up with an hCard.
- Brian Suda has managed to embed a photo in his hCard through the data URI scheme by converting the image to BASE64 code. View the Source to see how this is accomplished. The X2V link will extract the image and encode it for a vCard which will be displayed in some address book applications.
- Inspired by this I thought to try the same for SVG at Barefoot ...
- <img class="photo" style="display:none;" src="data:image/svg+xml;text,<?xml version='1.0' encoding='UTF-8' standalone='no'?><svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.0' width='50' height='80' id='svg3957'><defs id='defs3959' /><path d='M 28.91433,...32.192802 z' style='fill:#cc4d00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.625;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1' id='path9551' /></svg>" alt="Barefoot">
- Does it work?? Well it parses OK. Some automated tools replace the < with %3C (etc., e.g. Brian Suda's vCard form). Unfortunately Kontact (KDE contacts tool) doesn't handle SVG as a vCard photo or logo format - I don't know if this is a standard. It seems it could work and maybe even does somewhere. Maybe the text field needs to be Base64 encoded? ... see pbhj's slashdot journal for a bit more on this.
- Cinema Treasures uses hCard to markup venue information for 10,000+ movie theaters.
- Dan Connolly's index of events and talks has hCards for many of the people he has met at those events. In Mar 2006, he moved a bunch of hotel contact info from his PDA to this page; it's now up to 32 hCards.
- Don Crowley has published his hCard as well as a nifty hCard button:
- Douglas W. Clifton added all types of contact information
- Eventful publishes all of its venue information pages with embedded hCards.
- Iowa Military Veterans Band Contacts - 95 hCards marked up by Scott Reynen
- Jack L. Wolfgang II has converted the addresses in his resume to hCards.
- Mathieu Drouet and Annie Leger both have hCards
- Oliver Brown has published his hCard.
- Paradigm Productions published a vCard as a
ul
(marked up by Peter Jacobson) - Patrick H. Lauke has marked up his contact info with hCard.
- Paul Schreiber has published his hCard on [http://paulschreiber.com/about/?contact his about page.
- Paul Schreiber's Sunnyvale House Concerts site publishes hCards for upcoming artists, as well as an hCard for the page itself. In addition the Past Shows page contains hCards for all past artists.
- Paul Smith has created an hCard page which is Human Readable, and a link to X2V passing the same hCard page to generate a vCard.
- Phil Windley has published his hCard.
- Piercarlo Slavazza has published an hCard.
- Rob Mientjes has published his hCard on his about page.
- Robert Bachmann has published his hCard and a button.
- Scott Reynen has published his hCard on [http://www.randomchaos.com/document.php?source=scott_reynen his profile page.
- StackFrame, LLC has published employee and general contact information as hCards.
- Steven Ametjan has published his hCard on his about page.
- Syndicate - Speaker List as a set of hCards
- TagCamp contact list
- The Brothers McDowell have hCards at their Contact page.
- Twinsparc put an hCard in the header and footer of all their pages.
- Web 2.0 Conference speakers page marked up with hCard
- Web Essentials 05 marked up all their presenters with hCard.
- The University of Guelph includes hCard info in its directory.
- The Australian Child Care Index has over 3000 entries listing child care services across Australia - and every single one is marked up with an hCard!
- CADforless, Inc. we listed our partners using hCard
- Avon - publishes all 40,000+ Avon representatives' contact info with hCard.
- Flock About page supports hCard microformat.
- by Flock
- Iowa Military Veterans Band
- Nature homepage, uses XOXO.
- Sunnyvale House Concerts supports hCard and hCalendar.
- University of Bath Person Finder supports hCard, e.g. see Mrs A Smith page.
- Monster Prague Openings supports hCard, e.g. home page, contact list to come.
Grouped Examples
This section organizes examples into several rough categories as follows. If an example fits in more than one cateogry, 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".
- Group Blogs - blogs with multiple authors marked up with hCard
- 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 "fn" with perhaps a few individuals listed in a single sub-bullet, comma delimited, sorted by "family-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".
- 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".
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
- David Baron's home page is marked up with hCard.
- Tantek Çelik's home page includes an inline author hCard at the bottom of the page.
- Chris Wilson has an hCard for himself on his about page.
- Paul Roub has an hCard for himself on his blog's home page.
- ...
Organizations
- Technorati (3)
- about, press, and contact pages are marked up with hCard and have "Add to Address Book" links that use the Technorati Contacts Feed service.
- Technorati Japan (1)
- contact page is marked up with hCard.
Institutions
- Technorati's Staff page has hCards for its employees (~31)
- E.g. Adam Hertz, Matthew Levine, Ryan King, David Sifry, etc.
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)
- ...
Group Blogs
with some problems:
- 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".
Online Profiles
Online Venues
- ...
Speakers Listings
2007
- ...
2006
- ...
2005
- ...
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).
- Dmitry Dzhus embedded his UTF8 encoded hCard with Russian characters in «Author» page of his website.
- 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
Related Pages
- 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.