«
»

hCard parser H2VX not ready for HTML5 yet

Saturday, January 14th, 2012

Updated January 16, 2012

New frontiers come with unexpected challenges. I like using the hCard microformat in websites to make it easy for people to add contact information to their address books. I also like building websites in HTML5 for the semantics and am confident it is the way forward. Tools like Modernizr make browser support less of an issue with the new tags.

What’s an hCard without a parser?

The hCard format is great for publishing contact info in HTML, but to turn it into a vCard that can be downloaded and added to your address book, something has to do the conversion for you. A “production deployment of the X2V hCard” is located here allowing one-click downloads of hCards in any web page.

This is a real gift — saving us from keeping vCard files up to date on our own servers, and/or writing our own hCard to vCard conversion tools. It was created by the hCard microformat authors Tantek Çelik and Brian Suda which perhaps has added to it’s popular usage.

What’s not ready with this parser?

Regarding hCard microformats H2VX and HTML5, here’s the rub: it does not support the new HTML5 tags, and will not find them in your webpage if your hCard root element is an HTML5 tag.

I noticed an issue when updating some websites to use <section> tags instead of <div> tags for the root element of an hCard. (NOTE: the root element of an hCard has class=”vcard”).

HTML5 for your .vcard root element will not work

<section class="vcard">
    <a href="http://aaronwhitman.com" class="url fn">Aaron Whitman</a>
</section>

HTML for the .vcard root element works as expected

<div class="vcard">
    <a href="http://aaronwhitman.com" class="url fn">Aaron Whitman</a>
</div>

So, when updating websites with hCards to use HTML5 tags, make sure to consider this issue. Thankfully, there is a dev version of H2VX that does support HTML5 tags. The fact that this is a “dev” version implies it is not to be relied upon, but it is encouraging to see that HTML5 support is in the works.

Now to check every website I’ve built in recent memory for the hCard broken by HTML5 situation.

Tags: , ,

Posted on Saturday, January 14th, 2012 at 4:59 pm and filed under: User Experience, Web Development. This post has an RSS 2.0 feed. You can leave a response, or trackback from your own site.

  • Anonymous

    TBF, this isn’t hCard that’s broken, but one specific parser.  Any parser I’ve written would work, I would expect Operator still works, etc.  I think the H2VX problem is it uses/used HTML-tidy.

  • http://aaronwhitman.com Aaron Whitman

    Thanks for pointing this out — it’s certainly true that the problem requires a parser update — not the hCard microformat itself.  I’ve updated the post to clarify the issue as it relates to the H2VX parser.

    Some examples of HTML(5) support are the hCard validator http://hcard.geekhood.net/ and the dev version of H2VX http://dev.h2vx.com/vcf/ .

  • http://tantek.com/ Tantek

     Aaron, could you try your HTML5 hCards with http://dev.h2vx.com/vcf/ and post if it works for you?

    The dev version has been stable for over a year now, and I just posted the source to github as well:

    http://github.com/microformats/h2vx.com

    I’m planning on pushing it live to production soon, but would appreciate your testing/feedback on it first!

    Thanks,

    Tantek

  • http://www.aaronwhitman.com Aaron Whitman

    Tantek, thanks for the update, I tried several HTML5 hCards on it successfully.  All worked as expected.

    My particular experience involves timing: updating a website to HTML5 that already had an hCard in it.  After the update, the download link was broken because I did not realize this was a consideration when using H2VX.  I eventually found the dev version and tired it out with success.

    I was not comfortable linking to your dev version — only because “dev” implies not ready yet.  In the short term I’ve reverted to non-HTML5 markup for hCards, a simple and safe change for me.  Glad to hear you are getting ready for the production release with HTML5 support.

    The hCard microformat is one of my favorite website enhancements, and I’m very grateful to you and Brian for it.  Thanks for H2VX as well — it’s a wonderful gift to the web community.

    Regards,
    Aaron

  • http://twitter.com/hypnokayte Kayte McLaughlin

    Thanks for sharing this tip – I didn’t know about this!

  • Angelo

    Thank you Aaron, I’ve been trying to make it work, but without progress…
    Thanks Tantek for making a new (working so far) release. Any idea when the dev-version’s coming the standard?