Home/ Questions/Q 8694299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:45:14+00:00

So recently am reading a book called Adaptive Webdesign and I came across something

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0