Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is Microformats vCard still a best semantic way to code "contact information", in HTML 5?

Is Microformats still a best semantic way to code contact information in a web page?

enter image description here

I asked this question almost 2 years ago and got the answer where Microformat was the best solution. What is the best method to code physical address in html?

Now today in HTML 5, Is that still the best way?

<div class="vcard">
  <span class="fn">Gregory Peck</span>
  <a class="org url" href="http://www.commerce.net/">CommerceNet</a>
  <div class="adr">
    <span class="type">Work</span>:
    <div class="street-address">169 University Avenue</div>
    <span class="locality">Palo Alto</span>,  
    <abbr class="region" title="California">CA</abbr>  
    <span class="postal-code">94301</span>
    <div class="country-name">USA</div>
  </div>
  <div class="tel">
   <span class="type">Work</span> +1-650-289-4040
  </div>
  <div class="tel">
    <span class="type">Fax</span> +1-650-289-4041
  </div>
  <div>Email: 
   <span class="email">[email protected]</span>
  </div>
</div>
like image 939
Jitendra Vyas Avatar asked Apr 17 '11 06:04

Jitendra Vyas


2 Answers

It's a little bit different in HTML5, but builds on the same concept. See:

  • Examples and info on what you'd like to do @ http://rachaelmoore.name/posts/design/html/html5-microdata-contact-info/
  • The spec @ http://www.w3.org/TR/microdata/
like image 93
Hardeep Avatar answered Jan 18 '23 06:01

Hardeep


Here is the "conversion" form that I am using, if it helps. (The first couple of sites I forgot the html5 doc tag, and spent an hour trying to find out why it wasn't working, the document elements aren't recognized if the doc type is wrong, duh!)

<div itemscope itemtype="http://data-vocabulary.org/Organization"> 
    <h2 itemprop="name">Heading2</h2>
    TEXT text text

    <div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
        <span itemprop="street-address">12345 test way </span>, 
        <span itemprop="locality">Testville</span>, 
        <span itemprop="region">TS</span> 
        <span itemprop="postal-code">00000</span>
    </div>
    <span itemprop="geo" itemscope itemtype="http://www.data-vocabulary.org/Geo/" style="display:none"><!—Don’t display in UI-->
        <span itemprop="latitude">11.1111 N</span>  
        <span itemprop="longitude">11.1111 W</span>  
    </span>  
    <p>Call us at:</p> 
    <span itemprop="tel">555-555-5555</span>
    <div>
        <a href="http://www.blahblahbla.com" itemprop="url"> http://www.blahblahbla.com</a>
    </div>
</div>

(Citation).

like image 22
AlwaysLearning Avatar answered Jan 18 '23 06:01

AlwaysLearning