Think back to when you first began using the web. It might be a couple of years, probably five, ten or even more. How did you use the web back then? More likely than not, you searched using Google, or Lycos, or Alta Vista (yeah, I’m old, I remember when Alta Vista came along and made web search actually work), or if you are really old like me, you’ll have used a directory - back in the day when human editors could look at all the sites in the world, and manually classify them into directories like Yahoo!, LookSmart, or the open directory project. That didn’t seem to scale past a few million sites.
But our usage patterns then and now are largely the same. Search engines indexed pages based on page content, and other measures of relevance; users searched using keywords, and looked perhaps at the first 5, 10, or at a pinch 20 results. And this is largely how we use the web today. We seek out atomic pieces of information - like pages, and we read them.
But the pages on the web aren’t simply discrete islands of information. Often they contain very similar information - from mundane things like contact details for individuals and organizations, to reviews of films, restaurants, books, to opinions about what’s worth reading online. Yet aggregating all those contacts details to create a distributed Yellow pages-like service, or those opinions about restaurants, books, films, gadgets to create decentralized versions of IMDB reviews, or Amazon books reviews, or Zagats, is very hard, because there are no standardized formats on the web for contact details, or reviews, and many many other kinds of commonly published information. The wisdom of the web, the collective opinions and attitudes expressed there are largely inaccessible, because software isn’t smart enough to recognize it.
Say you want to sell your car. How do we go about doing that? Like with IMDB for film reviews, or Amazon for book reviews we find a centralized place to post a classified listing - or maybe several. Each requiring our effort and time to fill in details, each possibly requiring some form of payment. Each a walled garden.
But what if we could somehow post this listing to our blog, and then easily let services which cared about classifieds listings know that there is a new or updated classified at my site. The missing piece that would enable this is a standard format (after all html doesn’t have a
I’m sure you can easily imagine all kinds of situations like these, where centralized solutions are required, simply because there is no standardized, semantic way of marking up the data required for a distributed or devolved system to work.
So data stays locked up in proprietary databases, despite it effectively being public data. Yellow pages-style directories are jealously guarded by their compilers even though it’s our details which are being kept. Amazon owns your reviews, and reserves the right to edit or delete them. And all this cool data that could be being mashed up in amazing ways, is largely inaccessible.
The open source effect
The last decade or so has seen a growing awareness of the importance of open source in the software world, and open document formats (standards like HTML and CSS and PNG), but we are only just beginning to understand the importance and power of open data. Plenty of open data, published under creative commons and other liberal licenses is available, but we can publish all the data we like, without a way of making it accessible to software via meaningful formats it’s of little useful value.
But where will these formats, for reviews, for classifieds listings, for citations, and as yet undreamt of uses come from?
- Do we wait for the W3C to give us XHTML2, complete with all the semantics we might ever need? It seems a far fetched hope. A foolish one in reality.
- Do we all invent new XML languages for our specific needs - like reviewML, classifiedML? That seems overkill for discrete chunks of information that lots of people are already publishing as it is.
- Do we need all of today’s web developers, who let’s face it often don’t even do HTML all that well, to become XML developers. That’s hardly realistic.
But if we think for a moment about how the web has developed so successfully - it’s been incremental, evolutionary, not revolutionary - we might find a way forward that doesn’t break our tools and browsers and force developers to learn a whole new set of skills and concepts. And this is the approach that microformats take to developing simple, open web data formats built on existing data formats and existing developer practices to enable and encourage decentralized development, content and services.
So let’s just take a quick look at what microformats are and aren’t, then we’ll look at some very significant organizations already using them. Then we’ll take a look at just how easy it is to use them.
What microformats are
microformats are
- simple
- HTML based
- data formats
- based on existing standards
- based on current developer practice
to bring richer semantics to today’s web, and enable decentralized services
- without breaking browsers
- without breaking tools
- without requiring massive changes to developer knowledge
What microformats aren’t
Microformats aren’t a whole new language. They aren’t a whole new way of developing for the web. They don’t try to solve all the web’s problems. And they certainly aren’t hard to use. If you use valid HTML or XHTML, and have used the class and id attributes, then you have all the know how you need to use microformats right now. And if you don’t, a few minutes looking at some of these articles about the proper use of these attributes will get you up to speed
- Competent Classing, by Eric Meyer
- A touch of class by Tantek �elik
- Use class with semantics in mind, W3C
- More about the class attribute, Tantek �elik
OK, but who is actually using microformats?
Digital Web magazine recently published an article of mine which has a round up of what big and small publishers, like Yahoo! and Cork’d are doing with microformats, what support for microformats is available in tools like DreamWeaver, WordPress, MoveableType, and Drupal, and what aggregators like Technorati and Edgeio are doing with microformatted content on the web. So rather than rehash that here, take a look at the state of the art in mid 2006. You’ll most likely be surprised at just how widely used they are.
So how do we use them? It’s hard right?
If you can use HTML, microformats are simple. I mentioned that there are tools and plugins for some of the web’s most popular content development and design tools, but let’s take a look at how to hand code a really commonly used, and quite sophisticated microformat, hCard
One of the most common pieces of information on the web is contact information for people and companies.
Here is how we might typically mark up a company’s contact details, taken from the original markup for our conference company, Web Directions
Web Directions Conference Pty Ltd
8/54 Mitchell St
Bondi NSW 2026
Australia
Phone/Fax: 61 2 9365 5007
Email: info@…
But, we can add a little microformatty goodness, and make this much more machine readable.
We use the hCard micrformat - which for the geeks in the audience is just vCard, a format we all use probably without knowing it, for address books, in HTML.
Here is how easy it is. First, we want to say that this whole construct is an hCard, so we use a class value on our root element of vcard
class=”vcard”>
Web Directions Conference Pty Ltd
8/54 Mitchell St
Bondi NSW 2026
Australia
Phone/Fax: 61 2 9365 5007
Email: info@…
Now, we’ll designate the name of the organization for this hCard
class=”vcard”>
class=”fn org”>Web Directions Conference Pty Ltd
8/54 Mitchell St
Bondi NSW 2026
Australia
Phone/Fax: 61 2 9365 5007
Email: info@…
Where fn is vcard’s way of saying the display (’formatted’) name, and org the organization - vcard comes from the prehistoric times of the early 1990s, and back then we were really concerned with wasting bytes, so almost everything gets abbreviated
Next we have the address bit, so we mark that up as follows
class=”vcard”>
class=”fn org”>Web Directions Conference Pty Ltd
class=”adr”>
class=”street-address”>8/54 Mitchell St
class=”locality”>Bondi class=”region”>NSW 2026
class=”country-name”>Australia
Phone/Fax: 61 2 9365 5007
Email: info@…
Here we’ve had to add a little bit of HTML, the span elements, to create more semantic containers for our chunks of information - the various components of the address, such as region and postal code. All these class names, by the way are directly taken from the field names in the original vCard specification. So, the semantics defined by the fields of vCard become the semantics of hCard. We are ‘reusing existing formats and schemas’, rather than reinventing the wheel,a key principle of the microformats way.
Next we have the telephone and email parts
class=”vcard”>
class=”fn org”>Web Directions Conference Pty Ltd
class=”adr”>
class=”street-address”>8/54 Mitchell St
class=”locality”>Bondi class=”region”>NSW 2026
class=”country-name”>Australia
Phone/Fax: > 61 2 9365 5007
Email: >info@…
And we are more or less done. We could now go and remove our own earlier ‘pseudo semantic’ markup like this
Web Directions Conference Pty Ltd
8/54 Mitchell St
Bondi NSW 2026
Australia
Phone/Fax: 61 2 9365 5007
Email: …
And now we have a completely standardized hCard for the contact information for Web Directions.
And, as we mentioned, if you are even lazier there are tools for DreamWeaver, various blogging system and CMS like Wordpress and Textpattern, and the online hCard creator to do all the heavy lifting for you.
Some other common, and widely used microformats that are no harder to use than this, and which might well fit your existing development needs are
- hCalendar - for all kinds of events - used by upcoming.org and eventful as their publishing formats
- hReview - for reviews of all kinds of stuff - used by Yahoo! Local and Yahoo! Tech, and the really cool Cork’d among others
- rel-tag, for tagging your pages - widely used by bloggers, aggregated by Technorati, with over 100 million tagged pages indexed
- votelinks - for voting on stuff - See the cool experimental site http://folkse.de [check this]
- XFN, the original microformat, for describing your relationships with people - friends, colleagues, whom you’ve met, and so on
- hResume - for marking up your resume
- hListing for classified listings, used by Edgeio, a real innovator in decentralized services
So what are you waiting for? Get out there and start marking up your content with Microformats. You’ll be adding to the semantic richness and usefulness of the the web, you’ll be bringing a new sophistication and consistency to your markup, and you’ll be helping the next great evolutionary step in the web - a genuinely semantic web of data, and not just pages.
Some further reading and resources
- Microformats.org the home of microfomats
- Microformatique the unofficial microformats blog
- Introduction to Microformats by Brian Suda, O’Reilly “ShortCuts” series, PDF
- Microformats cheat sheet by Brian Suda
Like this article? Digg it!
John.
Great article. Thanks.One question. Do the search engines currently look for these microformats in their ranking algorithms?
Not that that would be the only reason to use them, but I’m sure that would light the fire under some people.
I really like the concept of microformats and your explanation is very informative.
The vCard example - to make this example more semantic, wouldn’t it be beneficial to use an
<address>somewhere in there? That is what the<address>tag is for, right?Is there a reason why so many of them start with “h” ? hReview, hCalendar, etc.
While this is neat, it seems like it could really be a pain for hand coding; having to put all those little spans and classes everywhere. The worst is the date/time format. Not changing existing standards sounds nice, but can we please just put some hyphens in there? I have no idea when “20050428″ is, but “2005-04-28″ suddenly becomes so much more readable.
[…] They have just published a very nice overview of microformats by John Allsopp which is a great introduction if you want to come up to speed. […]
Just briefly looked over the example. Has the ID in the last example been removed for a reason?
Does NSW mean New South Wales (guess)? If so, wouldn’t you be better off doing
<abbr title="New South Wales" class="region">NSW</abbr>?For the email, the class email should go on the anchor itself, therefore there is no need for the extraneous span element in this case.
Finally, in the example the telephone markup is incorrect. TEL requires two other values, type (cell, work, etc) and value (the actual number). There are clearer and correct examples on the Microformats wiki.
@Greeneo: Microformats are designed to be human readable first, then machine readable. So, you can use hypens in either, but you could also do <abbr title=”20060825″>25th August</abbr>. However date examples aren’t shown on this article.
@JP: Yeh, the examples on the wiki show better semantics with the <address> element, and uses spans (which can be styled as block) which is better than using paragraphs in my opinion.
Greeneo, many of the microformats start with ‘h’ for two reasons.
1) adding an arbitrary character will prevent collisions with any CSS style that might also use the name ‘review’ or ‘calendar’
2) more importantly, the letter ‘h’ was chosen because it is a review in HTML, so it becomes ‘hReview’
Another excellent introduction to µF John, I like the step-by-step transformation of old to new code.
Kendall – I’ve no awareness of anything as mainstream as Google indexing based on µf just yet (although I’d put money on the µf loving monkeys at Yahoo! making the first move when it happens), but Technorati has a Microformats based search engine at http://kitchen.technorati.com/search/
JP – Use of the ADDRESS element is defined as being for the page authors/owners information, not any arbitrary address in a page. This means that in some cases use of ADDRESS is appropriate with hCards or parts of hCards, but you also have to keep in mind that ADDRESS is an inline element, not block level, which can throw quirky DOM rearrangement in web browsers if you try to use it as the container for the entire hCard. On my hCard on my blog, I have address elements around my inline email addresses and IM addresses, but that’s pretty much all it’s good for.
Greeneo – The ‘h’ stands for HTML and is used to fit the convention set by the vCard and iCalendar standards they’re based on. The convention has largely stuck for other Microformats too.
Although the date standard used doesn’t allow hyphens, the relevant Microformats specs say that hyphens may be included by authors and must then be stripped by processors. So you can hyphen separate your dates as you like, and a search engine/browser feature should strip them out again to maintain vcard compatibility.
You might want to check out Tails, a Firefox extension which helps you find Microformats on pages. Drew McLellan has tools for parsing Microformats.
Unfortunately, that hCard isn’t quite correct–a tel requires one or more types and a value, the email class should be applied directly to the link, and the region should probably be marked as an abbreviation (NSW stands for New South Wales, right?). See http://pastebin.com/775749
Also, the intermixing of div/p/span could probably be improved (why are street-address and country-name in paragraphs, while locality/region are in span?).
Greeneo: I think the h refers to HTML. Also, you may want to read the thread on date-time formats at http://microformats.org/discuss/mail/microformats-discuss/2006-August/005211.html
[…] Add microformats magic to your site […]
[…] John Allsopp has a nice intro piece on using microformats over at Vitamin: Add Microformats Magic to Your Site. And, as we mentioned, if you are even lazier there are tools for DreamWeaver, various blogging system and CMS like Wordpress and Textpattern, and the online hCard creator to do all the heavy lifting for you. Some other common, and widely used microformats that are no harder to use than this, and which might well fit your existing development needs are […]
Great article!!
Add microformats magic to your site…
For many of you, this’ll go right over your head….
[…] I keep up on developments in web design and semantic data structuring, so when I saw the rss version of http://www.thinkvitamin.com/features/design/how-to-use-microformats, I went and read the whole thing outside of my feed reader. I was hoping the article would clear up a few bothersome questions I’ve got about micro formats, but alas, disappointment. […]
[…] How to use microformats. [via Kevin Lawver] I’m just not sure if the way microcontent happens is for folks to hack tags into their pages. Seems pretty archaic and nerdy to me. But god bless them anyway. We love microformats. […]
[…] 1. Start here, it’s a great introduction to microformats. Of head over to microformats.org. […]
@Kendall
“Do the search engines currently look for these microformats in their ranking algorithms?”
In a general sense, no, but in a couple of specific instances, yes.
Google uses the “rel=’nofollow’” microformat to not give any ranking to links which include the use of that microformat.
Technorati has a search engine specifically for microformatted content
http://kitchen.technorati.com/search/
Edgeio searches for hListing microformatted classifieds listing
Given that Yahoo! is extensively publishing extensively using hCard, hCalendar and hReview at local, tech, and upcoming, I suspect Yahoo might be interested in more general searching for microformatted content., but that is complete speculation on my part.
Great question
j
Wait a minute! I thought one of the main goals of CSS was to separate data from presentation. Isn’t this sneaking data back into presentation?
JP
“I really like the concept of microformats and your explanation is very informative.
The vCard example - to make this example more semantic, wouldn’t it be beneficial to use an somewhere in there? That is what the tag is for, right?”
Thanks for the nice words.
Ah, address is a tricky one. Address is not generally for addresses, strangely enough, but according to the HTML spec for
So, for my contact details as an author of a page, yes, that’s appropriate, but generally, for any contact details, it’s not.
This is one that had bitten almost all of us when we first think about semantic contact details.
thanks again
john
@Greeneo
Is there a reason why so many of them start with “h” ? hReview, hCalendar, etc.
I blieve this naming convention comes from hCard, which is an HTML version of vCard.
Hence, hCalendar (HTML version of iCalenndar, the IETF open calendaring format (used by iCal among others)), and then by analogy for new microformats like hReview (which is not based on a specific existing formmat or schema)
hCard and hCalendar creator are your friends.
My article on monday in Digital Web looks at these and other tools and plugins for doing the hard work!
thanks again
j
@Trovster
The senseof removing these was the original “pseudo semantic” markup of classes and ids was no longer necessary.
That’s a good thought, but NSW is the standard postal name for the state, like PA or NY in the US, so that’s probably overkill.
Thar’s correct.
would be better as
<p>Email:<a href="..." class="email">...</a></p>
Actually, these are optional not required values. It’s true that outlook has trouble with converted hCards if these values are left off, but I didn’t want to overly complicate the example
thanks
john
Nicely written. Very informative. i can see them everywhere now!
[…] Quick note on a Think Vitamin article just published on microformats. It’s a pretty detailed primer, including a worked example of converting reasonably complex, real workd contact details for a company into an hCard. […]
So thats what they are, now I get it.
Great, thanks.
This is a quite commonly expressed objection to the way microformats uses class, but its based on a misunderstanding of the way the class attribute in HTML was designed. Yes, class is very commonly,and appropriately used by web designers in conjunction with CSS to style pages, and in truth, it is often overused for that, but despite this, class, according to the HTML specification “has several roles in HTML”, including “for general purpose processing by user agents”.
Microformats utilize this second aspect of the class (and id) attribute, and do so legitimately. It is not an abuse of the class or id attribute to use it to add semantic context to a document. Nor is the use of class in and of itself presentational - in fact, it is an important mechanism for separating presentation from structured content.
Microformats…
Després de força temps sense veurens en persona, ahir vaig passar quasi tot el dia amb l’Ernest. Varem tenir molta feina actualitzant-nos de mil i un temes personals, professionals i de tot tius. En una……
Great article, John!
Can I translate this article on Russian and provide your thoughts to Russian web-developers?
—–
Maksim Rossomachin, Russian Federation
WSG member
I find the concept of microformats to be intriguing. I also anticipate it being a difficult sell to clients. It’s hard enough to convince people to use simple h tags and lists for the most basic of semantic markup.
Tagging everything with a class and extra spans takes time and time equals expense. The only reason I’m able to convince people that standard semantic markup is a good value is because it dramatically helps search engine performance. When Google pays attention to microformats and rewards people for using them with better rankings, then they will be important practically and not just an I’m geekier than thou gimmick.
I once talked people into taking time to incorporate Dublin Core metadata into their sites, for no practical gain. For now, on-general-principal microformats seem to be in the same class as Dublin Core, great in theory but, since they provide no measurable ROI, practically a waste of time and money. I may play with the idea on my own blog but not sell it to clients.
+61 2 9365 5007
Improper nesting anyone>?
ok so no
codeallowed. fabulous@michael,
I’m not sure you need to sell it to your clients, any more than you need to sell using CSS over font elements, and other choices you as an implementor make.
Most likely you’ll initially be doing quite simple things, like adding contact details using hCard, and if the client has any events, using hCalendar for these. These are simple tools to do the basic code for you (hCard and hCalendar creator, links above), so the effort isn’t great.
There’s quite a considerable different between this and the dublin core metadata stuff - it’s much more lightweight, it’s actually mostly “visible metadata”, and there are already search engines which use the data (Technorati’s microformats search, see above).
Hope these are some useful thoughts
john
[…] Add Microformats To Your Site is a John Allsopp how-to on microformats worth passing around. […]
[…] Web Directions organizer, John Allsopp, who’ll also be speaking on microformats at the conference, has just published a detailed introductory article at Think Vitamin. […]
[…] Vitamin Features » Add microformats magic to your site […]
Based on some of the many excellent sugestions and comments to this article, I’ve got a revised, slightly more complex example of this hCard at my blog, microformatique.
[…] Here’s an updated example from my Think Vitamin example. It’s a bit more detailed, and clears up a couple of little errors. […]
Excellente article, I so wanted a deeper explaination of these MF, Thanks
[…] Q: I’m not technical, Why should I know about Microformats? While still in it’s very very early stages, this could be a protocol that could be used to further define RSS, and make information publishing, categorizing, and managing more accurate and effective. Marketers could benefit by quickly publishing information in organized methods, consumers could quickly obtain information in organized fashions. Q: Why Microformats? Social Media (blogs, forums, wikis, etc) are exploding that so many voices, reviews, thoughts, and memes are being spread through the internet, a method to identify, collect, organize, and repurpose/manage will be a service to the world. Summary: So much information, very little structure. Q: How do they work? Since it’s not a new language, it can be embedded in HTML (as I understand it from Wikipedia) I believe that RSS can also contain the information which will be great if you need to get the word out or update information quickly. Think Vitamin has published a nifty article on embedding Microformats in HTML. […]
This article couldn’t have come at a better time. I have a handful of projects in the works that could benefit greatly from Microformats, but until now, I was having some trouble getting my head around the whole concept. Great primer!
[…] John Allsopp has written a great introduction to Microformats over at the Vitamin. His article is a well worth the read. […]
Great article John,
Hopefully it will push usege of microformats another step ahead. Now I know where to refer people who ask me questions like “What is these microformats about?”
Thanks!
P.S. You didn’t mention hAtom. I am using it on my blog and think that it’s also worth an attention.
The Microformats Movement…
With the news that Yahoo! fully supports microformats, there are undoubtedly a few questions from the not-so-techy web user. Having had the chance to briefly speak with Tantek about microformats at BarCamp SF this past summer, I can help to clear any …
@Dimitry
Yes, hAtom is a really cool idea. It’s pretty early days for hAtom, and I didn’t want to overload people with the ideas, so I stuck to hCard. For hAtom, people will need to keep an eye out for my book :-)
j
Hi John, great article, well introduced and explained for not so technical people like me.
Do you know Google Base? http://base.google.com/
It seems trying to achieve the same objetive of going further in classifing contents as microformats do. But maybe with its own format…
Google Base is an interesting thing, I’m going to try and do some thinking about the association with microformats. My initial thoughts is it’s in many ways antithetical - centralized data, not “data at the edges”. Be nice if their API was also available in a microformatted form.
john
[…] And THEN - there is the increasing adoption of microformats with a standard markup language including hResume. hResume is a Microformat standard for displaying a semantic XHTML representation of resume or CV information on web pages. Or Niall Kennedy creating an atom and poscast version of his resume? I am still trying to work out how and where all of this fits in and will save it for a later post. But is any of this what I mean when I talk about Job Search 2.0? …not so much. […]
[…] Vitamin Features » Add microformats magic to your site Another great feature article at Vitamin — this time from Jon Allsopp with a nice simple overview of microformats and where they can be useful. (tags: microformats webdevelopment webstandards webdesign howto data technology) […]
[…] John Allsopp, selbst Microformat-Experte, hat kürzlich auf Think Vitamin über Mikroformate geschrieben und besitzt auch einen Blog, der sich ausschließlich mit diesen befasst: microformatique. Zwei Beiträge dort haben mein Interesse geweckt: […]
Sometimes microformats can win (or at least please) You clients.
Lets say we have a website with ~ 1K contacts (yep, not a small organization) designed with microformats.
We load tails export fx extension [ https://addons.mozilla.org/firefox/2240/ ] and our client can be happy with automatic exporting of (selected) contacts to her Outlook =). Client doesn’t have Outlook? - n.p. contact will be exported to the address book by default installed on every Windows machine.
John - Thanks for clearing that up about the address tag.
[…] http://www.thinkvitamin.com/features/design/how-to-use-microformats […]
JP,
a pleasure
j
I did some analysis on Microformats for the non-technical web proffesional or the marketer
Love to hear your thoughts
http://www.web-strategist.com/blog/2006/08/27/understanding-microformats-for-the-non-technical-web-professional-or-marketer/
Thanks for that John, your article comes at a perfect time. I’ve been struggling to figure out just what microformats are for ages and now I understand them a little better.I always thought that you could turn html into a sort of psuedo-xml by just adding some classes to spans, is this along similar lines? Also, why is it called hcard, but the first class is vcard?
I am currently designing a site that contains sports fixtures. Could I incorporate hcalendar into these, but also add extra classes such as “home team” and “away team” etc?
Thanks again,
DAZ
[…] John Allsopp: Add microformats magic to your site […]
@Jeremiah,
I linked to the article at my new microformats blog Microformatique, a really good place to start from a slightlly higher level perspective.
@Daz
Yes, you can include your own additonal markup inside microformats, like hCalendar. BTW, the home and away teams could be hCards
thanks
john
John,
Dan Cederholm had an interesting discussion about formatting addresses several years back. I’m wondering what you think about using a definition list for containing the vCard microformat? I’m not a programmer and I found the microformats wiki to be a little confusing to interpret.
Dan,
The use of definition lists for things other than strict definition of terms was quite in vogue a little while back. I blame in part or whole the HTML 4 spec’s frankly weird use of dls for dialogue as an example of th euse of definition lists. I don’t think that a dialogue can remotely fall within the definition of
So, I don’t actually think an address where the name of the entity is a term element, and the address components are “descriptions” makes sense according to the spec (btw, this is Dan’s 3rd suggestion for a semantic address).
These are just my thoughts BTW, I am happy to be convinced otherwise (but I suspect it would take some doing :-)
thanks for the thoughtful comment
j
Great article. Thanks for the clarification on the html ADDRESS element.
[…] Aussie developer John Allsopp has written two great articles (on Vitamin and Digital Web) that explain what microformats are and why web developers and content providers should adopt them. Two must-read for those interested in the semantic aspects of the web. […]
Aha try this!
I notice there are very few examples of people using multiple telephone details using MF such as cell, fax etc.
I did and Outlook kicks up a fuss when using a converter (suda, technorati) and strings them into one number!
So my code is -
<div class="vcard">
<ul>
<li class="header"><span class="org">Company Name</span></li>
<li><span class="fn">Contact Name</span></li>
</ul>
<ul class="tel">
<li class="header">Contact Numbers</li>
<li>Tel: <span class="type hide">work</span><span class="value">0000 0000</span></li>
<li>Fax: <span class="type hide">fax</span><span class="value">1111 1111</span></li>
<li>Mobile: <span class="type hide">cell</span><span class="value">2222 2222</span></li>
</ul>
<ul class="adr">
<li class="header"><span class="type">Address</span></li>
<li><span class="street-address">Road Address</span></li>
<li><span class="locality">Town</span>, <span class="region">County</span>, <span class="postal-code">Post Code</span></li>
<li><span class="country-name">Country</span></li>
</ul>
<ul class="email">
<li class="header"><span class="type">E-Mail</span></li>
<li><span class="value">abc@abc.com</span></li>
</ul>
</div>
I use a span class of hide to hide the words ‘work’, ‘fax’ and ‘cell’ as I want to use ‘Tel:’, ‘Fax:’ and ‘Mobile:’.
When I use Technorati or Suda, Outlook outputs only the fax and mobile numbers as all the numbers above in one string.
I haven’t tested it in Thunderbird, Evolution etc but I’d like to know if there is a work around for this. Cheers!
While setting up the ‘contacts’ page at work, I noticed that there’s not any clear info on how to hanle telephone extensions with hCard… Should i just tack it to the end of the phone# so that “tel” then includes the extension?
I’m wondering how others have handled phone extensions…
[…] Add microformats magic to your site Article on how and why you should incorporate microformats into your site. […]
Maybe I’m not too smart, but what is the benefit of usiing Micriformats other than having a standard method of coding? Can they be dynamically updated? Do they slip into applications? What about database output? Are they easy to import into Address Book or Outlook? Is that why?
G3,
some big things that microformats bring are
1. a standardized way of coding things that people already do, but it all kinds of incompatible ways. Once you get a standardized format for data, all kinds of interesting possibilites emerge for using that data - especially in a networked environment like the web.
2. This also brings consistency, efficiency and maintainability to coding
3. Interoperability of data - hCard and hCalendar for example are very easily converted to vCard and iCalendar. In face, by adding a simple link to your web pages which contain hCard or hCaelndar, people can download your page’s content as vCard or iCalendar. See
http://www.webdirections.org/program/ for a quite complex example - click the link near the top and you get a .ics version of the calendar on the page - the microformmatted data in the HTML is converted on the fly by X2V.
Hope this are all helpful suggestions, and thanks for the excellent question. Those of us who have bbeen working with microformats a while sometimes overlook that its not always immediately obvious why they are so exciting
j
[…] And those who need more convincing to adopt microformats Add microformats magic to your site Yahoo Local Supports Microformats […]
Actually, i was looking at this about 2-3 months before anyone noticed and have to admit it’d be a good thing if more adopt it.
I was playing with hResume Wordpress plugin and not getting very far, the concept was good, just not the implementation. I couldn’t get anything to display and then when i could i didn’t like what i was seeing.
But i thoroughly liked the idea of having your c.v. / resume hosted on your website in a format readily-devourable by search engines.
To me, it sounded the ideal way to get out there and get noticed; which if your like me and desperate to find a good job in the US and emigrate is the main thing on your agenda.
Glad to see the format’s getting more support, hopefully we’ll get more ping-able sources to use for it.
till later, ;-)
[…] Read later: Vitamin Features » Add microformats magic to your site… too busy to read… […]
[…] Vitamin Features » Add microformats magic to your site Good article on microformats. Anyone else out there interested in developing microformat standards for media/music sites? (tags: microformats) […]
[…] Vitamin Features » Add microformats magic to your site […]
[…] Add Microformats Magic to Your Site […]
[…] Another great article on a different aspect of microformats at Think Vitamin, and a blog called Microformatique devoted to microformats. […]
[…] Add microformats magic to your site from Vitamin […]
[…] Di seguito troverete una breve raccolta di risorse online sull’argomento. Wiki What are microformats? Voglio un web semantico e lo voglio adesso Microformats, quando il contenuto collide con la forma (o no?) Microformats: Managing Personal and Event Data Microformats Primer Intro to Microformats Add Microformats magic to your site The big picture on Microformats Microformats: Tomorrow’s Web Today […]
[…] Add microformats magic to your site Heard of the semantic web? Using Microformats everyone can contribute to the richness of the web. John Allsopp explains how. […]
[…] “Say you want to sell your car. […] What if we could somehow post a listing to our blog, and then easily let services which cared about classifieds listings know that there is a new or updated classified at my site. The missing piece that would enable this is a standard format (after all html doesn’t have a element).” [Add Microformats Magic to your site] […]
[…] Add Microformats Magic to your site […]
What a great article, only to be slammed with SPAM comments. I bet if they were maintained, it would cut down on scanning them to just a few seconds, but since it was 9 months ago…
[…] “Say you want to sell your car. […] What if we could somehow post a listing to our blog, and then easily let services which cared about classifieds listings know that there is a new or updated classified at my site. The missing piece that would enable this is a standard format (after all html doesn’t have a element).” [Add Microformats Magic to your site] […]
[…] Add microformats magic to your site […]
Vitamin Features » Add microformats magic to your site…
[…][…]…
Personal Document Organizer…
Your blog posts are insightful. I will take them into deep thought and consideration. Your point of view is very smart and intellectual. Charlie…
[…] John Allsopp shows you how to add microformats to your web pagesread more | digg story […]
[…] Представьте, что вы хотите продать машину, вы могли бы опубликовать объявление в блоге, а сервисы, специализирующиеся на этом нашли бы его, классифицировали и разместили в каталоге. Все, что для этого нужно это использовать микроформат hListing, так как в HTML нет элементов предназначенных для описания товара. [Add Microformats Magic to your site] […]
I am reading the microformats for quite some time. But my some confusion is still there. can anyone give me the answer.
- Why Microformats are not metadata?
- from where I can get the list of class used for microformats. I think i can use my own class. right! but how google, yahoo,.. will know then?
Is there any good web site for class listing. I want to know how microformats can be used for code publishing.
Please reply me at satyakaran at gmail dot com
Thanks
[…] How to Use Microformats by Vitamin Features […]
no comments
Hey Look This site
http://www.ooYes.net
[…] Das englischsprachige Portal Vitamin geht auf Microformats ein und gibt Tipps zur Einbindung: John Allsop: Add microformats magic to your site. […]
billing codes for medical services, billing medical services, billing services medical billing company, billing software, business financial services medical billing, business medical billing services, company billing medical services, medical billing, medical billing and practice management services , medical billing business, medical billing company, medical billing services,
[…] John Allsopp shows you how to add microformats to your web pagesread more | digg story Similar posts: How to Keep Diggers Busy for Hours […]
Sodaltech is the leading manufacturer and exporter of egg tray machinery for 15.5 lbs egg trays,
17 lbs egg trays, 20 lbs egg trays, egg boxes, 6 cavity, 12 cavity,15 cavity. We also manufacturer mould tools for pulp moulded products as per your sample and requirement., 17 lbs egg tray, 17 lbs egg trays, 17 lbs egg tray manufacturers,
gk global is efficient providers of us tax preparation, 1040 tax preparation, write up services, bookkeeping services, cpa tax back office, tax off shoring, tax preparation partners, accounting & taxation services,
Gkglobal provides efficient services in bpo Tax compliances, Tax consultants in India, Compliance with RoC, Compliance Audit, Business Process Outsourcing, QuickBooks Accounting, Capital Tax Planning for business, Payroll Outsourcing, US GAAP Statements, Sarbanes Oxley Compliance, Insurance Claims Processing, Project finance, Project feasibility studies, Bookkeeping, Company formation India, Company law advisors, Consultancy NRI, Consulting services, Filing E-TDS returns, Financial advisors India,
Sodaltech is leading manufacturers and exporters of pulp products like molded pulp packaging, molded pulp packaging in india, molded pulp packaging products, molded pulp packaging products in india, molded pulp suppliers, molded pulp suppliers in india, molded pulp trays, molded pulp trays in india, pulp molding, pulp molding in india, packaging products,
[…] Add microformats magic to your site Pune un comentariu Programare web Trackback NU EXISTACOMENTARII […]
[…] Add Microformats Magic to Your Site: Find out how to use microformats for your site, complete with code. […]
[…] Vitamin Features » Add microformats magic to your site (tags: microformats howto web xhtml css webdev) […]
One month ago we started another search engine for microformats over at www.virel.de
[…] Add microformats magic to your site […]