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?

Gimlet

Answer 1

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

Cranwell

Ahaaa Nice answer...atleast clears this for me that class names have nothing to do with my page – Gimlet

Answer 2

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

Steeplebush

Answer 3

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.

Jaan

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.

Rinderpest

But does it have any special rendering effects or like what if I used those classes for other elements? – Gimlet

Answer 5

I'd recommend you to use http://schema.org/ for microformats. Google officially recommends using it, and it is also fully supported by Bing and many other search engines. When you use schema.org microformats, search engine crawlers will extract data entities from your markup and will display them in search results in corresponding manner.

So yes, there are benefits of using microformats. By using them you can improve behavior of search engine crawlers, your content will be properly indexed and what is more important, it will be properly categorized, so it will appear in customized searches.

Heterogony

But does it have any special rendering effects or like what if I used those classes for other elements? – Gimlet

@Mr.Alien, those classes are used for DOM hooks (CSS & JS typically). As such, the vcard format relies on the assumption that anyone using the vcard class intends to use the vcard microformat. You can set your class attributes to whatever you'd like. If you haven't set a vcard class on a parent element, there's nothing to worry about. – Jaan

You can't use schema.org with microformats or vice-versa. You probably mean microdata. – Tousle