How does the hcard concept work in HTML

Question

So recently am reading a book called Adaptive Webdesign and I came across something called an hcard, hcalendar and I went to it's respective documentation page. Now the question is am not understanding how this works? It is used to represent people..and the markup goes like this

<div class="vcard">
    <a class="url fn" href="http://tantek.com/">Tantek Çelik</a>
</div>

Now I know these classes have meanings like url indicates that a given link takes the user to a webpage and fn signifies formatted name so on...

So does these classes point the search engines that the content is a hCard or it render's differently etc..Can someone explain me how this works, whats the benefits to do so, and does this have importance from SEO point of view and are these classes predefined?

Edit: So are these classes reserved? What if I use them for other elements? And is there any javvascript which I can call onclick of a button to save a vcard on computer/user device?

Answer 1

This concept allows machines the get detailed informations about content. It's quite simple, you know what a given name is. Machines does not... :)

So you need a way to tell a machine what kind of data your html contains.

For example: You could enrich your data like the example below and allow, maybe an Adressbook-Application, to get detailed informations about which fields should be filled.

<div class="vcard">
    <a class="url fn" href="http://tantek.com/">
        <span class="family-name">Tantek</span>
        <span class="given-name">Çelik</span>
    </a>
</div>

This snippet allows the Adressbook-App. to find the given name easily and set it to the correct field. Order doesn't matter here.

Test your "Rich Snippets": http://www.google.com/webmasters/tools/richsnippets

Answer 2

If you haven't declared that you're using the hCard syntax (by using the vcard class), then you're free to use whatever class names you'd like. Even if you did start using the hCard microformat, no styles will be applied implicitly, as microformats are not related to display style.

The purpose of using microformats is to open an interface for exposing metadata. By providing the data in a standardized microformat, anyone parsing your website can use the microformat to find relevant information.

Search engines in particular benefit from this as it allows them to provide more information about a particular resource on their results page.

Answer 3

vCard is a standard for an electronic business card. hCard takes these labels and uses them as class names around data in HTML.Every hCard starts inside a block that has class="vcard".

Some of these types have subproperties. For example, the 'tel' value contains 'type' and 'value'. This way you can specify separate home and business phone numbers. The 'adr' type has a lot of subproperties (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value).

<div class="vcard">
   <div class="fn">xxxxx</div>
   <div class="adr">
      <span class="locality">yyyy</span>,
      <span class="country-name">zzzzz</span>
   </div>
</div>

The class names don't have to mean anything within your page. However, you can always take advantage of them to style your contact information. You could also style them in your browser's User Style Sheet, so that you can find them while you surf the web. (Original source)

Regarding the SEO aspects, Please checkout this article Tips for Local Search Engine Optimization for Your Site

Answer 4

I don't know exactly of hcard and hcalendar, but for instance, look up a Stack Overflow question on Google, you'll see that the time when it was posted appears next to the content, for many sites it also displays the name of the author.

In other words, Google will use these microformats to enhance the search experience, by providing meta-data for the search as it was parsed from the page.

You help Google, they help you.