I’ve been aware of Microformats for quite a while now but I never thought it would actually kick off. I was quite wary as to whether they would get implemented much in the future but it seems like they have taken off in a big way now.

It’s a concept I’m considering toying with on our Intranet – we’ve built an internal contacts directory which could adopt these Standards and make life easier considering the vast majority of employees are using Outlook.

Cheers for the simple walkthru anyway Drew.

Remo – you miss the point. What I’ve done is taken my existing markup and added classes to turn it into an hCard. If I were marking up some contact information for presentation as purely contact information then that might be a different matter. What I had was marked up appropriately for a bio, and been able to enrich that with an hCard.

Jonny – that sounds really useful. Thanks for posting the link!

Nice and simple explanation of what should be — but isn’t always — a nice and simple topic. Thanks Drew.

Hmm sounds interesting, but how are name clashes between Microformat class names and usual class names for styling avoided? How does the greasemonkey script know the vcard class was intended to be a vcard and not just a short name to style the “Vertical CAR Description” on car manufacturers site (silly example). With more and more Microformats evolving the class namespace becomes more and more cluttered…

Well I guess this was discussed somewhere else already – I’ll go and have a look. Thanks for the quick introduction!

Yeh, that’s nice. I’m adding these into a few sites I’m making. But I’m also toying with adding class=”fn” and “org” to general information, without a “vcard” container.

It’s good that these examples don’t use the strictest form that is shown on the examples of the vCards. The examples on the wiki are not very semantic.

I’ve expanded on the format myself for recent projects, by using a definition list to contain the information and the address HTML element to markup the address.

First of all, minor typo: in the second paragraph after “Introducing hCard” you have ”(of if you can, just to try this out)” and I can’t figure out what “of” should be, “or”?

Secondly, why didn’t you insert the user script in this page so we could try it out? If you have, it doesn’t seem to work in Opera 9 or FF1.5.

Although the hCard microformat seems to work nicely, I don’t like all of the other microformats, especially the conversation one.

Nice work Drew on this whole site!

Excellent article Drew!

Andi, take a look at the microformats FAQ.

Jules, if you have suggestions for improving a microformat for conversations, I encourage you to join the microformats-discuss mailing list and give your feedback.

@Tantek:

I went to Microformats.org but couldn’t find the conversation microformat and then I realized that I learned of it from your Podcast at WE05. I don’t think you gave it a “microformat name” at the time and I didn’t see anything resembling it on Microformats.org.

Has it been “published”?

those microformats dont look very semantic to me – definition lists or such would make more sense than divs and spans

but its a good idea to define markup standarts

There is a Firefox extension to open hCards as vCard files (in Outlook, etc) called Smartzilla

@ed: I think your code is not microformat because it does not follow any standard microformat rules, at least not the hCard microformat.

As far as I’ve understood them, microformats are ways of describing your data using regular (X)HTML and CSS class names. The trick is using the same HTML frame and class names so that machines (programs, scripts etc) could follow them and understand what that specially marked up piece of text actually means.

So, putting your full name in whatever html tag with the class full_name is not hCard microformat, but using class name fn, is.

You only need to take a look at microformats.org and understand what are the guidelines for coding every special microformat, then you can use it in your web pages without breaking the layout, standards etc, but preparing your data for the Semantic Web.

one thing missing

demo!

Very good. I think that miss a demo. Other article in Portuguese: http://rs.rockgrafia.com/artigo/hcard/

I’m probably sounding stupid here, but uhm I don’t understand this Microformats concept at all.

What I don’t understand is,

1. what do you do with it? specifically by just adding css classnames as a form of tagging?

2.How is it used is a real world scenario, anyone has an example to enlighten my blurred view?

Example: (using square ”[ ]” brackets for pointy ones)

[div id=”contacts”]

  [span class=”full_name”]

    Joe Raindeer

  [/span]

  [span class=”full_name”]

    Jane Millenium

  [/span]

[/div]

Was that microformats??

Thanks!