16

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">info@commerce.net</span>
  </div>
</div>
Community
  • 1
  • 1
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 1
    (updating 2011 context for nowadays) As showed by [this answer about Microformat *vs* Microdata](http://stackoverflow.com/a/28650129/287948) , after 2013 the scenarios changed and Microdata is the best choice... This [recent statistical study](http://dws.informatik.uni-mannheim.de/fileadmin/lehrstuehle/ki/pub/Meusel-etal-Schema-org-Adoption-WIMS2015.pdf) reinforce the Microdata adoption. See also [tag schema.org here](http://stackoverflow.com/questions/tagged/schema.org). – Peter Krauss Feb 09 '16 at 21:38

2 Answers2

12

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

Eric Hansander
  • 944
  • 2
  • 11
  • 20
Hardeep
  • 503
  • 6
  • 12
  • Is there any tool like this http://vcardmaker.com/ to make the code with newer HTML5 standards? – Jitendra Vyas Apr 17 '11 at 11:18
  • Unfortunately, it's extra complicated because it's trying to support both the current hcard/vcard and future html5 methods. I don't know of any tool like that to use though, sorry :/ – Hardeep Apr 17 '11 at 16:48
  • 2
    Keep in mind the new http://www.schema.org thing that all the major search engines have thrown in on. It utilizes HTML5 microdata exclusively and new vocabularies that bear some resemblance to http://www.microformats.org and http://www.data-vocabulary.org, but are also different and more extensive. Also see http://ablognotlimited.com for info and http://rlmo.me/n7zNU0 for bookmarks that include tools (no HTML5 ones that I know of right now). – morewry Jul 19 '11 at 14:45
5

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).

mrjimoy_05
  • 3,452
  • 9
  • 58
  • 95
AlwaysLearning
  • 51
  • 1
  • 1