hcard-examples-in-wild: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(Undo revision 64509 by Hdlider (Talk))
No edit summary
Line 17: Line 17:
* http://cadmap-utilities.co.uk uses hcard markup on the footer of each webpage
* http://cadmap-utilities.co.uk uses hcard markup on the footer of each webpage
* [http://www.northstar3c.com/shop/ Northstar Country Candle Co.] has a hidden hCard site wide.
* [http://www.northstar3c.com/shop/ Northstar Country Candle Co.] has a hidden hCard site wide.
* [http://www.part-time-maid.com Part Time Maid] uses hCard on Contact us page [http://www.part-time-maid.com/contactus.html Part Time Maid Contact] & Article page [http://www.part-time-maid.com/articles.html Part Time Maid (Singapore) Blog]
*http://cadmapstudio.co.uk/ used hCard on the footer of each page on a Cad Services Site.
*http://cadmapstudio.co.uk/ used hCard on the footer of each page on a Cad Services Site.
*http://asiabizsetup.net/ used hCard formatting for contact information on contact us page.
*http://asiabizsetup.net/ used hCard formatting for contact information on contact us page.
Line 56: Line 55:
* http://www.cadmap.co.uk/ Cadmap Land & Building Surveyors uses hCard markup on the footer of each page.
* http://www.cadmap.co.uk/ Cadmap Land & Building Surveyors uses hCard markup on the footer of each page.
* [http://expertdent.ca/en ExpertDent dental clinics] uses hCard markup in the header as well as the contact section for its three dental care clinics].
* [http://expertdent.ca/en ExpertDent dental clinics] uses hCard markup in the header as well as the contact section for its three dental care clinics].
* [http://www.carpet-cleaning.com.sg Singapore Carpet Cleaning Pte Ltd] uses hCard on Contact us page [http://www.carpet-cleaning.com.sg/contact.html Singapore Carpet Cleaning Contact Page] & Article page [http://www.carpet-cleaning.com.sg/news.html Carpet Cleaning Blog]
* [http://www.us-inverters.com/ US-Inverters.com] uses hCard, geo, and hProduct markup on home page, [http://www.us-inverters.com/contact/ contact page] and [http://www.us-inverters.com/where-to-buy/china.php distributor pages], and on [http://www.us-inverters.com/inverter-chargers/ms4124e.php product pages].
* [http://www.us-inverters.com/ US-Inverters.com] uses hCard, geo, and hProduct markup on home page, [http://www.us-inverters.com/contact/ contact page] and [http://www.us-inverters.com/where-to-buy/china.php distributor pages], and on [http://www.us-inverters.com/inverter-chargers/ms4124e.php product pages].
* [http://www.henryandjames.co.uk/contact/ Henry & James Estate Agents] use hCard markup on their contact page.
* [http://www.henryandjames.co.uk/contact/ Henry & James Estate Agents] use hCard markup on their contact page.
Line 62: Line 60:
* [http://www.your-move.co.uk/ YOUR MOVE estate agents]uses hCard markup for branch addresses.  Example: [http://www.your-move.co.uk/estate-agent/york.html York Branch Page]
* [http://www.your-move.co.uk/ YOUR MOVE estate agents]uses hCard markup for branch addresses.  Example: [http://www.your-move.co.uk/estate-agent/york.html York Branch Page]
* [http://www.akama.com Akama (business listings)] uses hCard on companies profiles page [http://www.akama.com/company/Ennis_Business_Forms_Inc_a8d1a35818.html Sample company profile page]
* [http://www.akama.com Akama (business listings)] uses hCard on companies profiles page [http://www.akama.com/company/Ennis_Business_Forms_Inc_a8d1a35818.html Sample company profile page]
* [http://www.aircon-servicing.com Aircon Servicing (Singapore)] uses hCard on Contact us page [http://www.aircon-servicing.com/contactus.html Aircon Servicing (Singapore) Contact] & Article page [http://www.aircon-servicing.com/articles.html Aircon Servicing (Singapore) Blog]
* [http://telcoavi.es Telco Audio Vídeo e Ilumianción] uses hCards on the contact page. Example:[http://telcoavi.es/contacto.php Contacto]
* [http://telcoavi.es Telco Audio Vídeo e Ilumianción] uses hCards on the contact page. Example:[http://telcoavi.es/contacto.php Contacto]
* [http://nicolasbouliane.com Nicolas Bouliane - Conception de sites internet] uses hCards on the contact page as well as in the header and footer.
* [http://nicolasbouliane.com Nicolas Bouliane - Conception de sites internet] uses hCards on the contact page as well as in the header and footer.
Line 68: Line 65:
* [http://www.breaflorist.net/pages/Florist-La-Habra/display La Habra Florist] - Uses hCard markup in their la habra florsit page below.
* [http://www.breaflorist.net/pages/Florist-La-Habra/display La Habra Florist] - Uses hCard markup in their la habra florsit page below.
* [http://iprefer.com/ I Prefer Guest Benefit Program] uses hCard for each property page.  Example: [http://iprefer.com/luxury-hotel/Campinas/Royal-Palm-Tower/ Royal Palm Tower, Design Hotels in Campinas]
* [http://iprefer.com/ I Prefer Guest Benefit Program] uses hCard for each property page.  Example: [http://iprefer.com/luxury-hotel/Campinas/Royal-Palm-Tower/ Royal Palm Tower, Design Hotels in Campinas]
* [http://preferredhotels.com/ Preferred Hotels and Resorts] uses hCard for each property page.  Example: [http://preferredhotels.com/luxury-hotel/Singapore/The-Fullerton-Hotel-Singapore/ The Fullerton Hotel Singapore, Luxury Hotels in Singapore]
* [http://www.binvisions.com/ CSS3 and HTML5 Blog] - uses hCard to get vCard of users who make comments on blog posts. Example: [http://www.binvisions.com/articles/seo-using-css-text-indent-or-images-for-logos/ CSS Text-Indent or Images for Logos in SEO?]
* [http://www.binvisions.com/ CSS3 and HTML5 Blog] - uses hCard to get vCard of users who make comments on blog posts. Example: [http://www.binvisions.com/articles/seo-using-css-text-indent-or-images-for-logos/ CSS Text-Indent or Images for Logos in SEO?]
* [http://www.singaporelaundry.com Singapore Laundry] uses hCard on Contact us page [http://www.singaporelaundry.com/contact.html Singapore Laundry Contact] & Article page [http://www.singaporelaundry.com/articles.html Singapore Laundry Blog]
* [http://collectiverecyclers.com Collective Recyclers] - Uses hCard for contact details.
* [http://collectiverecyclers.com Collective Recyclers] - Uses hCard for contact details.
* [http://www.stylebar.de/ stylebar websolutions] Uses an hCard for the contact information on the right site in the website.
* [http://www.stylebar.de/ stylebar websolutions] Uses an hCard for the contact information on the right site in the website.
* [http://southpawed.com/ Steve Holland] uses hCard for his contact details.
* [http://southpawed.com/ Steve Holland] uses hCard for his contact details.
* [http://www.pestcontrolsg.com Pest Control Singapore] uses hCard on Contact us page [http://www.pestcontrolsg.com/contact.html Pest Control Singapore Contact]
* [http://sterlingdesignhotels.com Sterling Design Hotels] uses hCard for each property page on their website, e.g. [http://sterlingdesignhotels.com/design-hotel/Miami/Hotel-Urbano-AT-Brickell/ Hotel Urbano AT Brickell, Design Hotels in Miami]
* [http://sterlinghotels.com Sterling Hotels] uses hCard for each property page on their website, e.g. [http://sterlinghotels.com/smart-hotel/Hong-Kong/The-Fleming/ The Fleming, Smart Hotels in Hong Kong]
* [http://sterlinghotels.com Sterling Hotels] uses hCard for each property page on their website, e.g. [http://sterlinghotels.com/smart-hotel/Hong-Kong/The-Fleming/ The Fleming, Smart Hotels in Hong Kong]
* [http://www.carpetcleaningsingapore.com Carpet Cleaning] uses hCard on Contact us page [http://www.carpetcleaningsingapore.com/contactus.html Carpet Cleaning Contact] & Article page [http://www.carpetcleaningsingapore.com/articles.html Carpet Cleaning Blog]
* [http://daniele.gobbetti.name daniele.gobbetti.name] uses hCard for his own profile. The template is released under CC-BY-SA and available on [https://github.com/danielegobbetti/about-me github]
* [http://daniele.gobbetti.name daniele.gobbetti.name] uses hCard for his own profile. The template is released under CC-BY-SA and available on [https://github.com/danielegobbetti/about-me github]
* [http://www.sabzoo.de SABZOO.de] uses hCard for the about us page. Here is the direct link: [http://www.sabzoo.de/ueber-sabzoo/impressum.html About us]
* [http://www.sabzoo.de SABZOO.de] uses hCard for the about us page. Here is the direct link: [http://www.sabzoo.de/ueber-sabzoo/impressum.html About us]
Line 83: Line 75:
* [http://summithotels.com Summit Hotels and Resorts] uses hCard for each property page on the website.  Example: [http://summithotels.com/luxury-hotel/Honolulu/Waikiki-Parc-Hotel/ Waikiki Parc Hotel, Luxury Hotels in Honolulu]
* [http://summithotels.com Summit Hotels and Resorts] uses hCard for each property page on the website.  Example: [http://summithotels.com/luxury-hotel/Honolulu/Waikiki-Parc-Hotel/ Waikiki Parc Hotel, Luxury Hotels in Honolulu]
* [http://www.gauntsproperty.co.uk/ Gaunts Property Leeds] implements hCard in each of their business park locations contact pages
* [http://www.gauntsproperty.co.uk/ Gaunts Property Leeds] implements hCard in each of their business park locations contact pages
* [http://www.aircon-servicing.com Aircon Servicing] uses hCard on Contact us page [http://www.aircon-servicing.com/contactus.html Singapore Aircon Servicing Contact Us Page]
* [https://plus.google.com/ Google+] uses hCard for each user profile and company page.  Example: [https://plus.google.com/112111196451586545452/ ReadWriteWeb profile page]
* [https://plus.google.com/ Google+] uses hCard for each user profile and company page.  Example: [https://plus.google.com/112111196451586545452/ ReadWriteWeb profile page]
* [http://www.coatncast.de/ Coat'n Cast] has hCard formatted address information in the page markup, mainly to provide data to geolocation services.
* [http://www.coatncast.de/ Coat'n Cast] has hCard formatted address information in the page markup, mainly to provide data to geolocation services.
* [http://fiestapartyjumpers.com Party Rentals Simi Valley] is a party rental business using hCard and Microdata markup in footer section and soon will be on hompage.
* [http://fiestapartyjumpers.com Party Rentals Simi Valley] is a party rental business using hCard and Microdata markup in footer section and soon will be on hompage.
* [http://turfwholesalersusa.com Artificial Turf Los Angeles] a los angeles turf wholesaler using hcard markup in the footer area.
* [http://turfwholesalersusa.com Artificial Turf Los Angeles] a los angeles turf wholesaler using hcard markup in the footer area.
* [http://www.airconservices.com.sg Singapore Aircon Services] uses hCard on Contact us page [http://www.airconservices.com.sg/contact.html Aircon Services Contact Page] & In Article[http://www.airconservices.com.sg/articles/10-air-conditioner-mistakes-to-take-note.html 10 Aircon Mistakes To Avoid]
* [http://preferredboutique.com/ Preferred Boutique] uses hCard for each property page on their website, e.g. [http://preferredboutique.com/luxury-hotel/Atlanta/TWELVE-Atlantic-Station/ TWELVE Atlantic Station, Luxury Boutique Hotels in Atlanta.]
* [http://preferredboutique.com/ Preferred Boutique] uses hCard for each property page on their website, e.g. [http://preferredboutique.com/luxury-hotel/Atlanta/TWELVE-Atlantic-Station/ TWELVE Atlantic Station, Luxury Boutique Hotels in Atlanta.]
* [http://www.rentcarsingapore.com Car Rental (Singapore)] uses hCard on Contact us page [http://www.rentcarsingapore.com/contactme.html Car Rental (Singapore) Contact]
* [http://www.last.fm Last.fm] uses hCard for event pages and user profile pages (however user profile hCard information is very incomplete and sub-optimal) e.g. [http://www.last.fm/event/1448900+She+-+Him+at+Millennium+Park+on+7+June+2010 She & Him at Millennium Park (Chicago) on 7 Jun 2010 – Last.fm]
* [http://www.last.fm Last.fm] uses hCard for event pages and user profile pages (however user profile hCard information is very incomplete and sub-optimal) e.g. [http://www.last.fm/event/1448900+She+-+Him+at+Millennium+Park+on+7+June+2010 She & Him at Millennium Park (Chicago) on 7 Jun 2010 – Last.fm]
* [http://www.auntiecleaner.com.sg Auntie Cleaner] uses hCard on Contact us page [http://www.auntiecleaner.com.sg/contact.html Auntie Cleaner Contact] & Article page [http://www.auntiecleaner.com.sg/articles.html Auntie Cleaner Blog]
* [http://www.auntiecleaner.com.sg Auntie Cleaner] uses hCard on Contact us page [http://www.auntiecleaner.com.sg/contact.html Auntie Cleaner Contact] & Article page [http://www.auntiecleaner.com.sg/articles.html Auntie Cleaner Blog]
Line 264: Line 253:
*[http://adrianindo.blogspot.com ADRIAN'S BLOG] have included hCard to introduce myself more closely with the visitors of my blog. the hCard has been listed as a name, blog url and organizations. This hCard you can see on the lower right sidebar of my blog layout.  
*[http://adrianindo.blogspot.com ADRIAN'S BLOG] have included hCard to introduce myself more closely with the visitors of my blog. the hCard has been listed as a name, blog url and organizations. This hCard you can see on the lower right sidebar of my blog layout.  
* [http://www.canadianpokerexpo.com The Canadian Poker Expo (Toronto)], a Poker Lifestyle Expo focusing specifically on the Toronto market, is using hCard for [http://www.canadianpokerexpo.com/Contact-Us/Contact-Form their contact page] as part of their efforts to increase the site's local relavance.
* [http://www.canadianpokerexpo.com The Canadian Poker Expo (Toronto)], a Poker Lifestyle Expo focusing specifically on the Toronto market, is using hCard for [http://www.canadianpokerexpo.com/Contact-Us/Contact-Form their contact page] as part of their efforts to increase the site's local relavance.
* [http://www.airconservicesg.com Aircon Services Singapore] uses hCard on Article page [http://www.airconservicesg.com/articles.html Aircon Services Singapore Articles]
* [http://www.semineeas.ro Seminee As], a Romanian fireplace manufacturer, uses hCard for [http://www.semineeas.ro/contact/ contact info] with optional vCard download.
* [http://www.semineeas.ro Seminee As], a Romanian fireplace manufacturer, uses hCard for [http://www.semineeas.ro/contact/ contact info] with optional vCard download.
*[http://www.gastrohep.com/aboutus.asp GastroHep.com] About Us page uses an hCard for the contact address.
*[http://www.gastrohep.com/aboutus.asp GastroHep.com] About Us page uses an hCard for the contact address.
Line 270: Line 258:
*[http://leemannphotography.ca/?p=contact Lee Mann Photography] Uses an hCard on the main Contact page as well as the blog.Ideally it will soon be on the footer of every single page.
*[http://leemannphotography.ca/?p=contact Lee Mann Photography] Uses an hCard on the main Contact page as well as the blog.Ideally it will soon be on the footer of every single page.
*[http://www.kimburgess.info Kim Burgess] Minimalist info website with hCard markup positioned throughout.
*[http://www.kimburgess.info Kim Burgess] Minimalist info website with hCard markup positioned throughout.
* [http://www.paintersingapore.com House and Office Painting Services] uses hCard on Article page [http://www.paintersingapore.com/articles.html House and Office Painting Services Articles]
*[http://www.plumbset.co.uk/ContactUs.asp PlumbSet UK Ltd] Uses hCard for the contact address, including multiple street-address entries.
*[http://www.plumbset.co.uk/ContactUs.asp PlumbSet UK Ltd] Uses hCard for the contact address, including multiple street-address entries.
*[http://www.manuhealth.com/products/manuka-soap-75gm Manuhealth Natural Remedies] Uses hCard for the return address on product pages.
*[http://www.manuhealth.com/products/manuka-soap-75gm Manuhealth Natural Remedies] Uses hCard for the return address on product pages.
Line 552: Line 539:
*T-Mobile uses hCard for the [http://t-mobilepressoffice.co.uk/press/contact-details/ T-Mobile UK Press Contact Details page], as well as for some of the latest press releases
*T-Mobile uses hCard for the [http://t-mobilepressoffice.co.uk/press/contact-details/ T-Mobile UK Press Contact Details page], as well as for some of the latest press releases
* Psychology Press and Routledge's Behavioral Sciences' publishing division have implemented hCard on their contact pages on 17 of their websites (example on the contact page on their [http://www.clinicalpsychologyarena.com/contact/ Clinical Psychology Arena])
* Psychology Press and Routledge's Behavioral Sciences' publishing division have implemented hCard on their contact pages on 17 of their websites (example on the contact page on their [http://www.clinicalpsychologyarena.com/contact/ Clinical Psychology Arena])
* [http://www.drycleaning.com.sg Singapore Dry Cleaning] uses hCard on Contact us page [http://www.drycleaning.com.sg/contact.html Singapore Dry Cleaning Contact] & Article page [http://www.drycleaning.com.sg/articles.html Singapore Dry Cleaning Blog]
*[http://72ppi.us 72ppi], uses hCard in the footer.
*[http://72ppi.us 72ppi], uses hCard in the footer.
*[http://www.csarven.ca Sarven Capadisli] uses hCard throughout the site (including user comments in articles).
*[http://www.csarven.ca Sarven Capadisli] uses hCard throughout the site (including user comments in articles).
Line 575: Line 561:
* [http://www.creative-ways.nl/ Ron Kok] uses hCards to mark-up the names and URLs of commentors on his blog. He also uses hCards in combination with XFN in his blogposts to refer to friends, and has an hCard for himself on every page on his blog.
* [http://www.creative-ways.nl/ Ron Kok] uses hCards to mark-up the names and URLs of commentors on his blog. He also uses hCards in combination with XFN in his blogposts to refer to friends, and has an hCard for himself on every page on his blog.
* [http://tagg.no Tagg Media] uses hCard for [http://heine.tagg.no/contact.php contact information] and provide link to vCard download in the contact section.
* [http://tagg.no Tagg Media] uses hCard for [http://heine.tagg.no/contact.php contact information] and provide link to vCard download in the contact section.
* [http://www.windowgrill.com.sg Window Grill Singapore] uses hCard on Contact us page [http://www.windowgrill.com.sg/contact.html Window Grill Singapore Contact] & Article page [http://www.windowgrill.com.sg/articles.html Window Grill Singapore Blog]
* The article about the fictitious Matrix character [http://en.wikipedia.org/wiki/Neo_%28The_Matrix%29 Thomas A Anderson in Wikipedia] is now marked up with hCard.
* The article about the fictitious Matrix character [http://en.wikipedia.org/wiki/Neo_%28The_Matrix%29 Thomas A Anderson in Wikipedia] is now marked up with hCard.
* [http://dconstruct06.madgex.com/ d.Construct 2006 Backnetwork] uses hCards for conference delegates (and provides the markup so that delegates can copy and paste cards into their own sites).
* [http://dconstruct06.madgex.com/ d.Construct 2006 Backnetwork] uses hCards for conference delegates (and provides the markup so that delegates can copy and paste cards into their own sites).

Revision as of 13:13, 29 August 2014

<entry-title>hCard Examples in the wild</entry-title>

Want hCardsHave hCards

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.

new and uncategorized examples

Have hCard? If you have a site with hCard(s), add it to the top of this list. Include at least one URL to a page that includes actual hCard markup. Examples without direct links to pages with hCard(s) will be removed or edited to only link to page(s) with hCard. Check back after a few days, to see if anyone has found any problems with the examples supplied. Note that examples may be categorized and moved to the grouped section below. bahnspedition You may want to use these buttons on your pages with hCards. See buttons#hCard for any recent additions.
mf_hcard.png microformat_hcard.png

  • iProcess uses hCard for binding its legal location derived from founder specifically, though its an online only business firm.
  • Like Minders Babysitting Agency uses hCard markup on their contact page. However, it has some problems:
    • bad: invisible duplicate data using style="display:none"
      • update 2012-09-01: only the country-name is display:none now.
    • bad: empty "fn" (should be on same element as "org")
      • still a problem 2012-09-01.
    • suboptimal: email could be marked up but isn't
      • fixed 2012-09-01!
    • suboptimal: URL could be marked up but isn't
      • fixed 2012-09-01!

Thank you for the feedback on problems - improvements made - hope better now!

    • 2012-09-01: There are some worse problems now, e.g. the <a class="url fn org"> element has no contents, so there is no "fn" or "org"! This may be due to an accidental </p>. Better to simply update the div class="org" to div class="fn org", and make the a href class="url" only.
      • 2012-09-10

Thank you again - the second round of improvements have been made - hope better take 2!

  • The Brownbook - the open yellow pages The Brownbook is a peer-produced (like a wiki, but not a using a wiki engine) local business search website. It Uses hCard to allow users to export local business contact details to Outlook or other desktop apps, plus for providing detailed maps from Google.
    • Example of a search results page: Hairdressers in Egham
      • suboptimal: Adresses, e.g "2 Station Rd North, Egham, Surrey", are marked up as street-address
    • Example of a single business's details The Hair Emporium.
      • suboptimal: Adresses, e.g "2 Station Rd North, Egham, Surrey", are marked up as street-address
  • Sylphen is a IT-solutions-provider and uses hCards on the Contact
    • invalid two of the three examples lack the required fn or fn org property
  • 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 uses a hidden hCard on the contact page.
    • Hidden.
  • Last FM has hCards hidden on their profile pages e.g. [16].
    • 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 - [17] uses hCard on profile pages (where user has elected to show contact information).
  • 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.
  • 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)
  • Landsbanki Føroya
    • INVALID - using embedded RDF/XML invalidly
  • 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)

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.

  1. Individuals - one card per person, perhaps sort alphabetically by "family-name". People with their own hCards (typically) on their own site.
  2. Organizations - one card per organization, alphabetical by "fn". Organizations with their own hCard(s) (typically) on their own site.
  3. 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".
  4. 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.
  5. 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".
  6. Event Speakers - event pages where the speaker for the event is marked up with hCard.
  7. 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".
  8. Group Blogs - blogs with multiple authors marked up with hCard
  9. Wiki templates - community wikis that have templates that automatically generate hCards on pages
  10. Authors - pages about some other thing, such as books, perhaps reviews etc., which have marked up their authors with hCard
  11. Search Results - results pages from search engines (either generic or for people/organizations) that return people marked up with hCards.
  12. 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:

C/Ç:

I:

J:

M:

R:

  • Paul Roub has an hCard for himself on his blog's home page.

S:

T:

W:

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

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

France orgs

Spain orgs

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)

Georgia orgs

Israel orgs

Italy orgs

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:

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

Russia orgs

Scotland orgs

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:

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

Event Venues

Event Speakers

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.

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

Authors

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.

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).

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.

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.

related pages

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.