Rectangle 27 0

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


<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"><!Dont 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>

+1 for posting code instead of (now dead) links!

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

Note
Rectangle 27 0

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


Is there any tool like this vcardmaker.com to make the code with newer HTML5 standards?

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

Keep in mind the new 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 microformats.org and data-vocabulary.org, but are also different and more extensive. Also see ablognotlimited.com for info and rlmo.me/n7zNU0 for bookmarks that include tools (no HTML5 ones that I know of right now).

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 :/

Note
Rectangle 27 0

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


<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"><!Dont 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>

+1 for posting code instead of (now dead) links!

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

Note