Microformats: What They Are and How To Use Them

Advertisement

Web 2.0 has its positive and its negative sides. Apart from tremendous technological improvements, provided by Ajax, semantically organized content and the growing popularity of RSS-Feeds, the term “Web 2.0″ still hadn’t managed to assert itself as the renewed Web rather than a new revolutionary technology as it is mistakenly being called.

About Microformats1

Consequence: many renewed techniques, which somehow seem to be related to the “new” Web, aren’t fully or properly understood. This results in public misunderstandings and keeps both developers and users away from the use (the improvement) of these techniques.

One of the new terms on the horizon is Microformats (sometimes abbreviated µF or uF) – formats, which make it possible to create meta-content which can be not only read, but also understood by machines (which was the basic idea of Semantic Web2, which is not Web 2.0). This post is supposed to give you an idea, what Microformats actually mean, which advantages they have and how you can use them to enrich your content and make it more visible and understandable for search engines.

Things you should know about Microformats

About Microformats3

  • “Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.” [Microformats: Official definition4]
  • “Microformats is the generic name given to any format that builds on XML (X)HTML to provide additional metadata about web objects.” [Microcontent Design5]
  • “Microformats are simple codes that you can use to identify specific kinds of data, like people or events, in your webpages.” [Chris Messina6]
  • “A microformat is a piece of mark up that allows expression of semantics in an HTML (or XHTML) web page. Programs can extract meaning from a web page that is marked up with one or more microformats.” [Wikipedia: Microformats7]
  • “With Microformats, you can send & publish things like events, business cards, and product reviews as meaningful XHTML that a person can read in a browser, but a program can import, index and remix as native data.” [Michael McCracken8]
  • “Microformats are about using the standards we all know […] to convey as much semantic meaning as possible. They use current XHTML tags such as address, cite, and blockquote and attributes such as rel, rev, and title to create semantically appropriate blocks of code.” [Microformats Primer379]
  • “Microformats are not a new language, but adapted to current behaviors and usage patterns and is connected with semantic XHTML.” [About Microformats10]
  • “Microformats principles: solve a specific problem, simple as possible, reuse from widely adopted standards (semantic (X)HTML), modularity / embeddability, decentralized development, content, services. [What are microformats3611]
  • “That’s what microformats are, adding semantics to markup to take it from being machine readable to being machine understandable.” [Microformats: Introduction351912]
  • “There are lots of different microformats, ranging from very fundamental types of information like contacts13, locations14, and events15, to the slightly more domain specific, like reviews16 and resumes17, to the very domain specific, like wines18.”[Microformats: Introduction351912]

Existing Microformats

Microformats List20

  • hAtom21
    hAtom is a microformat for content that can be syndicated, primarily but not exclusively weblog postings. hAtom is based on a subset of the Atom22 syndication format.
  • hCalendar23 | hCalendar Creator24
    hCalendar is a simple, open, distributed calendaring and events format, suitable for embedding in (X)HTML, Atom, RSS, and arbitrary XML.
  • hCard25 | hCard Creator26
    hCard is a format for representing people, companies, organizations, and places, in semantic XHTML.
  • hResume27 | hResume Creator28
    hResume is a microformat for publishing resumes and CVs.
  • hReview29 | hReview Creator30
    hReview is an open, distributed format, suitable for embedding reviews (of products, services, businesses, events, etc.) in (X)HTML, Atom, RSS, and arbitrary XML.
  • rel="nofollow"
    Is an HTML attribute value used to instruct search engines that a hyperlink should not influence the link target’s ranking in the search engine’s index. Regarded as a microformat.
  • rel="tag"
    By adding rel=”tag” to a hyperlink, a page indicates that the destination of that hyperlink is an author-designated “tag” (or keyword/subject) for the current page. Note that a tag may just refer to a major portion of the current page (i.e. a blog post). e.g. by placing this link on a page,
    <a href="http://technorati.com/tag/tech" rel="tag">tech</a>, the author indicates that the page has the tag “tech”.
  • XFN31
    XHTML Friends Network (XFN) is a simple way to represent human relationships using hyperlinks developed by Global Multimedia Protocols Group. XFN enables web authors to indicate their relationship(s) to the people in their blogrolls simply by adding a ‘rel’ attribute to their <a href> tags, e.g.:
    <a href="http://jeff.example.org" rel="friend met">.
  • XOXO32
    XOXO (eXtensible Open XHTML Outlines) is an XML format for outlines built from XHTML modularization. Developed by several authors as an attempt to reuse XHTML building blocks instead of inventing unnecessary new XML elements/attributes, XOXO is both based on existing behavior of publishing outlines, lists, and blogrolls on the Web, and as a general outline format for 1:1 processing of fundamental programming language datastructures.
  • xFolk33
    xFolk is a simple and open format for publishing collections of bookmarks.

Advantages of Microformats

  • “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 site34]
  • “Now your information is scattered all over the Web, and you have to pick which sites you want to use. Soon: the combination of blogging and microformats is now reversing this model. Now, your information remains in your blog, and the Web sites come to you. For instance, if you want to sell something, you can blog about it using an hListing, and a site like edgeio will find it when it aggregates classified advertisements across the Web.” [Microformats: Introduction351912]
  • “Microformats enable the publishing and sharing of higher fidelity information on the Web. Small bits of (X)HTML that identify richer data types like people and events in your webpages. Building blocks that enable users to own, control, move, and share their data on the Web.” [What are microformats3611]
  • “Like CSS, microformats let you to do some interesting things through JavaScript and the DOM. After all, microformats are just a bunch of XHTML.” [Microformats Primer379]
  • Benefits of Microformats: they are (search) machine-readable, accurate and appropriate metadata, meaningful markup.
  • With Microformats “you can create more consistent content. You can share your microformat with content providers, ensuring that you’ll get content in the right format. You don’t need to DO anything to that content before you present it to users.” [The Awesome Power of Microformats5638]
  • “So what use would microformats be in a web browser? […] Future Web browsers are likely going to associate semantically marked up data you encounter on the Web with specific applications, either on your system or online. This means the contact information you see on a Web site will be associated with your favorite contacts application.” [Mozilla Does Microformats5139]
  • “The idea is that i.e. as soon as any page that has an hCard on it you can add to your address book, you can sync it with your PDA, your handheld, and it makes contact information, personal information, on the web a lot more useful.” [Microformats: Evolving the Web5040]

Microformats are already being used!

  • Edgeio.com (Weblog based business as niche for small and large companies), Rubhub.com41 (determines relationships between websites and peoples, scenarios: find alternative connections for supplies in producer chains,
    bookseller, car suppliers, internal contact management within large companies), Technorati.com42 (indexes hCard, hCalendar, and hReview, and also cumulative data is updated via event-driven pings)
  • Microformats can be used within Firefox Extensions (Tails43, Greasemonkey scripts44 for hCard, hCalendar, xFolks, etc.) and Blogging Extensions (Structured Blogging45 for WordPress)

Articles About Microformats

Microformats Tools

Microformats Icons58

  • Microformats Bookmarklet59
    helps to extract existing hCards and hCalendars and shows and stores existing contacts and events.
  • Tails Export60
    An extension for Showing and Exporting Microformats. Currently it supports hCard [export to .vcf file], hCalendar [export to .ics file], hReview, xFolk and Rel-license.
  • Highlight Microformats with CSS61
    Those that use Firefox with the Tails extension, read no further. This is not for you. You have it given to you on a plate, you don’t know how lucky you are. This is for those of us using Camino, Safari or Omniweb.
  • Operator62
    Operator leverages microformats that are already available on many web pages to provide new ways to interact with web services. It lets you combine pieces of information on Web sites with applications in ways that are useful. For instance, Flickr + Google Maps, Upcoming.org + Google Calendar, Yahoo! Local + your address book, and many more possibilities and permutations.
  • Microformats Dreamweaver Extension63
    Microformats Dreamweaver extension (ideally for use with Dreamweaver 8, although should work for MX and above) implements a few simple Insert Bar Objects to help Dreamweaver users to add hCalendar, hCard, rel-license, rel-tag and XFN data to their documents. After installing, you’ll find a new Microformats category on your Insert Bar. Support for more formats is to follow, so check back.
  • microformats.css64
    A CSS-based template for existing microformats, based upon the microformats cheatsheet (PDF)65
  • Microformats Cheat Sheet66
    This Microformats Cheat Sheet covers iCalendar, hCalendar, hReview, vCard, hCard, RelLicense, RelTag, XFN Format and Values and Dates.
  • Microformats Cheat Sheet67
    This microformats cheat sheet lists the properties by format and also lists each format and the hierarchy. This includes elemental microformats, compound microformats and some of the standard design patterns used.
  • Microformats Icons68
    The starter set contains icons for hCal, hResume, hCard, XFN and a generic TAG icon.

Tutorials, Introductions to Microformats

Blogs & Wikis

  • Microformats.org80
    Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Learn more about microformats.
  • Microformats Wiki81
    What are microformats? What can you do with them?
  • microformatique82
    Microformatique is an unofficial blog covering all things microformats, and “data at the edges”. Latest specifications, presentations, events, publications and more. It’s put togther by John Allsopp

Footnotes

  1. 1 http://microformats.org/about/
  2. 2 http://en.wikipedia.org/wiki/Semantic_Web
  3. 3 http://microformats.org/about/
  4. 4 http://microformats.org/wiki/what-are-microformats
  5. 5 http://www.readwriteweb.com/archives/microcontent_de.php
  6. 6 http://factoryjoe.com/blog/2006/12/14/make-me-money-make-you-money/
  7. 7 http://en.wikipedia.org/wiki/Microformats
  8. 8 http://microformats.org/wiki/what-can-you-do-with-microformats
  9. 9 http://www.digital-web.com/articles/microformats_primer/
  10. 10 http://microformats.org/about/
  11. 11 http://tantek.com/presentations/2006/07/what-are-microformats/
  12. 12 http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/
  13. 13 http://microformats.org/wiki/hcard
  14. 14 http://microformats.org/wiki/adr
  15. 15 http://microformats.org/wiki/hcalendar
  16. 16 http://microformats.org/wiki/hreview
  17. 17 http://microformats.org/wiki/hresume
  18. 18 http://microformats.org/discuss/mail/microformats-discuss/2006-November/007180.html
  19. 19 http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/
  20. 20 http://microformats.org/wiki/
  21. 21 http://microformats.org/wiki/hatom
  22. 22 http://www.atomenabled.org/
  23. 23 http://microformats.org/wiki/hcalendar
  24. 24 http://microformats.org/code/hcalendar/creator
  25. 25 http://microformats.org/wiki/hcard
  26. 26 http://microformats.org/code/hcard/creator
  27. 27 http://microformats.org/wiki/hresume
  28. 28 http://hresume.weblogswork.com/hresumecreator/
  29. 29 http://microformats.org/wiki/hreview
  30. 30 http://microformats.org/code/hreview/creator
  31. 31 http://en.wikipedia.org/wiki/XHTML_Friends_Network
  32. 32 http://en.wikipedia.org/wiki/XOXO
  33. 33 http://microformats.org/wiki/xfolk
  34. 34 http://www.thinkvitamin.com/features/design/how-to-use-microformats
  35. 35 http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/
  36. 36 http://tantek.com/presentations/2006/07/what-are-microformats/
  37. 37 http://www.digital-web.com/articles/microformats_primer/
  38. 38 http://presentations.lawver.net/standards/power_of_microformats/index.php
  39. 39 http://www.readwriteweb.com/archives/mozilla_does_microformats_firefox3.php
  40. 40 http://adactio.com/articles/1146/
  41. 41 http://www.rubhub.com
  42. 42 http://www.technorati.com
  43. 43 https://addons.mozilla.org/firefox/addon/2240
  44. 44 http://microformats.org/wiki/Greasemonkey
  45. 45 http://www.structuredblogging.com
  46. 46 http://microformats.org/
  47. 47 http://www.digital-web.com/articles/microformats_primer/
  48. 48 http://www.thinkvitamin.com/features/design/how-to-use-microformats
  49. 49 http://www.digital-web.com/articles/the_big_picture_on_microformats/
  50. 50 http://adactio.com/articles/1146/
  51. 51 http://www.readwriteweb.com/archives/mozilla_does_microformats_firefox3.php
  52. 52 http://tantek.com/presentations/2006/07/what-are-microformats/
  53. 53 http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/
  54. 54 http://www.costpernews.com/2007/01/03/microformats-and-the-decentralized-future-of-online-marketing/
  55. 55 http://duncan-cragg.org/blog/post/microformats-challenge-web-feeds-and-web-apis/
  56. 56 http://presentations.lawver.net/standards/power_of_microformats/index.php
  57. 57 http://myhpi.de/~schapran/pke/
  58. 58 http://www.bartelme.at/journal/archive/microformats_icons/
  59. 59 http://leftlogic.com/info/articles/microformats_bookmarklet#?
  60. 60 https://addons.mozilla.org/firefox/2240/
  61. 61 http://www.hicksdesign.co.uk/journal/highlight-microformats-with-css
  62. 62 https://addons.mozilla.org/firefox/4106/
  63. 63 http://www.webstandards.org/action/dwtf/microformats/
  64. 64 http://www.mindgarden.de/index.php?id=594
  65. 65 http://suda.co.uk/projects/microformats/cheatsheet/microformats.cheatsheet.pdf
  66. 66 http://www.ilovejackdaniels.com/cheat-sheets/microformats-cheat-sheet/
  67. 67 http://suda.co.uk/projects/microformats/cheatsheet/
  68. 68 http://www.bartelme.at/journal/archive/microformats_icons/
  69. 69 http://www.xfront.com/microformats/
  70. 70 http://nicknettleton.com/zine/microformats/an-intro-to-microformats
  71. 71 http://www.blue-anvil.com/archives/introduction-to-microformats-a-look-at-hcard-hatom
  72. 72 http://www.simplebits.com/notebook/2006/06/10/wineformats.html
  73. 73 http://corkd.com/
  74. 74 http://ben-ward.co.uk/journal/microformats-ui/
  75. 75 http://en.wikipedia.org/wiki/Microformat
  76. 76 http://theryanking.com/presentations/2006/www/
  77. 77 http://theryanking.com/
  78. 78 http://suda.co.uk/
  79. 79 http://bloghelper.is-there.net/using-microformats-in-wordpress/
  80. 80 http://microformats.org/
  81. 81 http://microformats.org/wiki/Main_Page
  82. 82 http://microformatique.com/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Very very useful, thank you.

  2. 2

    Just Smashing!

    Top Shelf!

  3. 3

    Did you mention the recently published book, Microformats: Empowering Your Markup for Web 2.0? It’s excellent. I believe you can download the entire appendices from the website, too. Not bad.

    As far as hAtom is concerned, all the plaintxt.org themes are hAtom enabled. Consider them working references.

  4. 4

    Webstandard-Team

    May 4, 2007 4:48 pm

    Useful list of microformat links, thx!

  5. 5

    Emerging Microformats

    May 4, 2007 8:29 pm

    You forget to mention the whole bunch of emerging sites built on microformats: Emurse.com, Edgeio.com, Corkd.com ,
    Eventful.com and Pingerati.net.

  6. 6

    Not to take away from the hard work and time that people have invested in microformats, but honestly, they sound like a watered down version of what XML was designed to do, for people who can’t (or won’t) do XML and XSL transformations. They’re basically trying to create a bunch of DTDs that use classes instead of XML tags.

    Even without XSL Transformations, most web-based scripting languages have an XML parser these days, I believe. So really, if you wanted to boil it down to simple XML and let people parse it however they choose, wouldn’t that achieve the same thing? The data stays in the same format no matter what system you’re pushing it through; you parse it and style it and display it via whatever method you’re most comfortable with, be it XSL, PHP, Javascript, etc.

    Just my $0.02. Slam away.

  7. 7

    Carlos Eduardo

    May 5, 2007 3:21 am

    Today, many people doesn’t understand the real mean of microformats.

    I think it will grow, but we have to spread it to more and more people and, sure, use it on our projects, supporting it.

    For example, we use some microformats on our projects on my work…

  8. 8

    I’m ready to try out microformats to add email addresses to address books, but wouldn’t microformats reveal addresses to spambots? Is there a way to protect them?

  9. 9

    Motorcycle Guy

    May 5, 2007 4:13 am

    Microformats? I don’t really get the point exactly, I don’t really get why these have particular names. Sounds like this is just doing what xml is supposed to do (describe data). I don’t see why every xml file now needs a new name.

  10. 10

    making your contents easier to be stolen?

  11. 11

    I agree with Alfred. Having your content stolen is not very fun.

  12. 12

    I hate articles that don’t describe anything… losers.

  13. 13

    Great job! This will really ease people who haven’t heard of microformats in. Now considering writing my own. Thanks!

  14. 14

    Frederick Townes

    May 5, 2007 10:01 pm

    Awesome post – a definitive reference on the topic. I know Dan Cederholm would love this! :) Cheers!

  15. 15

    I made a tutorial on how to implement Microformats into WordPress:
    hAtom and Microformats in WordPress

  16. 16

    Don’t forget the implementations page and Ma.gnolia group.

    @Alfred: you probably shouldn’t be publishing on the web if you don’t want people to reuse your data/content.

    @bob and @Motorcycle guy: Sure, and that’s why microformats are based in XHTML — it *is* XML! Furthermore, the goal is not to create yet another language, but instead to use the technology that *all* browsers already understand, and that millions of web designers are already familiar and fluent with. Why not make webpages better able to store and transmit data?

  17. 17

    I’ve just knocked together a simple Microformats news aggregator which some people may find useful…

  18. 18

    I wrote an introduction to microformats article, perhaps you would be interested in adding it to the list above.

  19. 19

    this site is very good for web designers
    i have a problem i want to know how to define when using division tags height and width please give me an tutorials on this

    thanx,
    gubba

  20. 20

    Very good write-up! I am also gonna publish a blog article about this… thank you

↑ Back to top