Friday, 12 October 2012

How To Implement the hCard and Validate It As Per Microformats.org

In our last post we spoke about how to prepare your site for the semantic web. Let us take up each point in detail every Friday. Today we have shared about the hCard implementation.

hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard (RFC2426) properties and values in semantic HTML or XHTML. hCard is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom, RSS, and arbitrary XML.

You can easily get the code by filling the form on http://microformats.org/code/hcard/creator once you have generated the code you can validate it on http://hcard.geekhood.net/

The hCard code on our contact page is as follows:
<div id="UK Office" class="vcard">

<a class="url fn org" href="http://www.alrayeswebsolutions.com/"> 
<strong><font color="#003086">Alrayes Web Solutions</font></strong></a> </div>               

    <div class="style3"><strong>UK Office</strong></div>

  <div>

  <div class="street-address">348A Harrison Road</div>

    <span class="locality">Leicester,</span> <br />

      <span class="postal-code">LE4 7AB</span> <br />

 <span class="country-name">UK</span><br />

 <span class="style3"><strong>Email:</strong></span> 
<a href="mailto:uk@alrayeswebsolutions.com">uk@alrayeswebsolutions.com</a></div>

 <div> <span class="type"><strong><font color="#003086">Phone:</font></strong>
</span> 08450 21 00 23 </div>

 <div><span class="type"><strong><font color="#003086">Phone:</font></strong> 
</span> 0208 123 8617</div>

 <div><span class="type"><strong><font color="#003086">Phone:</font></strong> 
</span> 0116 327 3078</div>

<div class="tel"><span><strong><font color="#003086">Fax:</font></strong> 
</span> 0116 326 0229 </div>

 <p>&nbsp;</p>

<div id="UAE Office">

<a class="url fn org" href="http://www.alrayeswebsolutions.com/"> <strong> 
<font color="#003086">Alrayes  Web Solutions</font></strong></a></div>

<div><strong><font color="#003086">UAE Office</font></strong></div>

<div>

 <div class="street-address">CWS Middle East <br />

  Suite 1702, Al Attar Tower, Sheik Zayed Road, Dubai, UAE<br />

 <strong><font color="#003086">Email:</font></strong>

<a href="mailto:uae@alrayeswebsolutions.com">uae@alrayeswebsolutions.com</a></div>

    </div> 

<div class="tel"><span>  <strong><font color="#003086">Phone:
</font></strong> </span></div>

<div class="tel"> <span> <strong><font color="#003086">Fax:
</font></strong> </span> +971 (0) 50 240 2051</div>

If you are using the hCard it is advisable to put only one address on the page but if you have to put more than one the change then  div id="" class="vcard" tag accordingly for every address. As shown above highlighted in yellow.

Above is the hCard example which is a microformat. The same can be added in the microdata format as follows:

Original HTML:
1. Alrayes Web Solutions
2. 348A Harrison Road
3. Leicester
4. LE4 7AB
5. UK

With Microdata:
1. <div itemscope itemtype="http://schema.org/PostalAddress">
2. <span itemprop="name"> Alrayes Web Solutions</span>
3. <span itemprop="addressLocality">348A Harrison Road</span>
4. <span itemprop="addressRegion"> Leicester</span>
5. <span itemprop="postalCode"> LE4 7AB</span>
6. <span itemprop="addressCountry">UK</span>
7. </div>

Related Links:

http://www.microformats.org/wiki/hcard

http://microformats.org/code/hcard/creator

http://hcard.geekhood.net/

http://schema.org/PostalAddress

Next Friday 19th October 2012 – Read about “How To Add video and audio files on your site using the schemas  as per schema.org”

1 comment:

  1. Well, this is a very helpful post. Thanks for the information you provided. It would be great if got more post like this. Nice and wonderful pictures and comments as well. Thanks for sharing with all. BY - Web Solutions Services

    ReplyDelete