Forum Moderators: phranque

Message Too Old, No Replies

hCards, microformats, XFN - I don't get it.

         

httpwebwitch

4:44 am on Nov 12, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm reading about these on microformats.org [microformats.org]. It's like... regular HTML markup, but with special class names.

<div class="vcard">
<span class="tel">
<span class="type">home</span>:
<span class="value">555.555.1212</span>
</span>
</div>

A root tag with the class "vcard". Then inside that, other elements with class names corresponding to properties and sub-properties [microformats.org].

Why do I feel so perplexed by this? It's like I went to the doctor asking for something to make me healthy, and he handed me an apple.

Is that really all it is?
For some reason I expected something more XML-ish, and definitely more ... complicated.

bill

7:07 am on Nov 12, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You've got it, essentially. ;)
Don't feel bad. It took me a while to grok as well.

You're just adding some additional markup that won't invalidate any of your existing HTML with the prescribed <div>s, <span>s and their associated classes.

httpwebwitch

3:15 pm on Nov 12, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I found a validation tool that looked at my finished page, and sure enough it did find my microformatted stuff, and it was perfect. It really is just as easy as it seems. Dumb simple.

To summarize,
you need a container element with a "vcard" class. It doesn't have to be just vcard - you can style and class it like ever:

<div class="noborder red [b]vcard[/b] leftcolumn">

Then inside that element, you'd format your address and contact information with any markup you want. On specific datums, you'd add appropriate classes, as defined in the spec.

If it was expressed as CSS selectors, ".vcard .tel" is an element that contains the telephone number.

LifeinAsia

4:45 pm on Nov 12, 2009 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Yep, you just need to make sure that you don't have any conflicts with existing class names on your site.