Smashing Magazine

Microformats: What They Are and How To Use Them

• By Vitaly Friedman
• May 4th, 2007
• 20 Comments

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.

¹

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 Web², 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 Link

³

• “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 definition⁴]
• “Microformats is the generic name given to any format that builds on XML (X)HTML to provide additional metadata about web objects.” [Microcontent Design⁵]
• “Microformats are simple codes that you can use to identify specific kinds of data, like people or events, in your webpages.” [Chris Messina⁶]
• “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: Microformats⁷]
• “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 McCracken⁸]
• “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 Primer³⁶⁹]
• “Microformats are not a new language, but adapted to current behaviors and usage patterns and is connected with semantic XHTML.” [About Microformats¹⁰]
• “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 microformats³⁵¹¹]
• “That’s what microformats are, adding semantics to markup to take it from being machine readable to being machine understandable.” [Microformats: Introduction³⁴¹⁹¹²]
• “There are lots of different microformats, ranging from very fundamental types of information like contacts¹³, locations¹⁴, and events¹⁵, to the slightly more domain specific, like reviews¹⁶ and resumes¹⁷, to the very domain specific, like wines¹⁸.”[Microformats: Introduction³⁴¹⁹¹²]

Existing Microformats Link

²⁰

• hAtom²¹
  hAtom is a microformat for content that can be syndicated, primarily but not exclusively weblog postings. hAtom is based on a subset of the Atom²² syndication format.
• hCalendar²³ | hCalendar Creator²⁴
  hCalendar is a simple, open, distributed calendaring and events format, suitable for embedding in (X)HTML, Atom, RSS, and arbitrary XML.
• hCard²⁵ | hCard Creator²⁶
  hCard is a format for representing people, companies, organizations, and places, in semantic XHTML.
• hResume²⁷ | hResume Creator
  hResume is a microformat for publishing resumes and CVs.
• hReview²⁸ | hReview Creator²⁹
  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”.
• XFN³⁰
  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">.
• XOXO³¹
  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.
• xFolk³²
  xFolk is a simple and open format for publishing collections of bookmarks.

Advantages of Microformats Link

• “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³³]
• “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: Introduction³⁴¹⁹¹²]
• “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 microformats³⁵¹¹]
• “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 Primer³⁶⁹]
• 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 Microformats]
• “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 Microformats⁴⁷³⁷]
• “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 Web⁴⁶³⁸]

Microformats are already being used! Link

• Edgeio.com (Weblog based business as niche for small and large companies), Rubhub.com³⁹ (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.com⁴⁰ (indexes hCard, hCalendar, and hReview, and also cumulative data is updated via event-driven pings)
• Microformats can be used within Firefox Extensions (Tails⁴¹, Greasemonkey scripts⁴² for hCard, hCalendar, xFolks, etc.) and Blogging Extensions (Structured Blogging for WordPress)

Articles About Microformats Link

• microformats – What are microformats?⁴³
  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. The official web-page.
• Digital Web Magazine – Microformats Primer⁴⁴
  Introductory article on Microformats by Garrett Dimon
• 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.
• Digital Web Magazine – The Big Picture on Microformats
  “In this article, we’ll review what people are doing with microformats right now, and finish up by looking at a couple of cool projects that might whet your appetite for microformats’ future prospects.” by John Allsopp
• Microformats: Evolving the Web⁴⁶³⁸
  Jeremy Keith – This is a transcript of a panel I sat in on at South by Southwest 2006. My fellow panelists are Chris Messina and Norm! The moderator is Tantek Çelik.
• Mozilla Does Microformats⁴⁷³⁷
  Firefox 3 as Information Broker – Richard MacManus
• What are Microformats?⁴⁸
  A presentation by Tantek Çelik
• Introduction to Microformats⁴⁹
  Microformats: Introduction, Structured Data, The Fundamental, Introducing Operator
• Microformats Challenge Web Feeds and Web APIs!⁵⁰
  Microformats are subversive: they not only challenge the approach of full-blown Semantic Web approaches, but even question fundamental Web 2.0 building blocks such as Web Feeds and Web APIs.
• The Awesome Power of Microformats
  What Are Microformats? – by Kevin Lawver
• Usable Microformats
  If you’re relatively new to microformats, then this article was written with you in mind. You don’t need to have any prior knowldege to understand what’s going on here.by Andy Hume
• Microformats⁵¹
  Microformats – Designed for humans first.by Prof. Dr. Mathias Weske

Microformats Tools Link

⁵²

• Highlight Microformats with CSS⁵³
  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.
• Microformats Dreamweaver Extension⁵⁴
  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 Cheat Sheet
  This Microformats Cheat Sheet covers iCalendar, hCalendar, hReview, vCard, hCard, RelLicense, RelTag, XFN Format and Values and Dates.
• Microformats Cheat Sheet⁵⁵
  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 Icons⁵⁶
  The starter set contains icons for hCal, hResume, hCard, XFN and a generic TAG icon.

Tutorials, Introductions to Microformats Link

• Tutorials on Microformats⁵⁷
  This series of articles deals with numerous aspects of Microformats, including basic theory and purpose of Microformats, hCard, hCalendar, AHAH, hReview, xFolk, hResume, XOXO and hAtom.
• Intro to microformats
  Confused, alarmed, disparaged? Let’s clear that up. An extensive introduction to the theory and use of Microformats.
• Introduction to Microformats + a look at hCard & hAtom⁵⁸
  Mike Jolley explains step-by-step, what Microformats are, how they can be integrated in web-pages and how you can enhance the efficicency of your content using them.
• Pairing Wine and Microformats⁵⁹
  Microformats in Practice: Dan Cederholm about the use of Microformats in Cork’d⁶⁰.
• Wikipedia: Microformats⁶¹
  The Wikipedia Entry.
• Practical Microformats
  Microformats from the Ground Up – an extensive tutorial, by Ryan King and Brian Suda⁶²
• Using Microformats in WordPress
  There are two approaches you can take. One: Manually pasting relevant microformat code created via microformat creators. Step-by-step instructions are as follows.

Blogs & Wikis Link

• Microformats.org⁶³
  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 Wiki⁶⁴
  What are microformats? What can you do with them?
• microformatique⁶⁵
  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 Link

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://microformats.org/wiki/hreview
29. 29 http://microformats.org/code/hreview/creator
30. 30 http://en.wikipedia.org/wiki/XHTML_Friends_Network
31. 31 http://en.wikipedia.org/wiki/XOXO
32. 32 http://microformats.org/wiki/xfolk
33. 33 http://www.thinkvitamin.com/features/design/how-to-use-microformats
34. 34 http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/
35. 35 http://tantek.com/presentations/2006/07/what-are-microformats/
36. 36 http://www.digital-web.com/articles/microformats_primer/
37. 37 http://www.readwriteweb.com/archives/mozilla_does_microformats_firefox3.php
38. 38 http://adactio.com/articles/1146/
39. 39 http://www.rubhub.com
40. 40 http://www.technorati.com
41. 41 https://addons.mozilla.org/firefox/addon/2240
42. 42 http://microformats.org/wiki/Greasemonkey
43. 43 http://microformats.org/
44. 44 http://www.digital-web.com/articles/microformats_primer/
45. 45 http://www.thinkvitamin.com/features/design/how-to-use-microformats
46. 46 http://adactio.com/articles/1146/
47. 47 http://www.readwriteweb.com/archives/mozilla_does_microformats_firefox3.php
48. 48 http://tantek.com/presentations/2006/07/what-are-microformats/
49. 49 http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/
50. 50 http://duncan-cragg.org/blog/post/microformats-challenge-web-feeds-and-web-apis/
51. 51 http://myhpi.de/~schapran/pke/
52. 52 http://www.bartelme.at/journal/archive/microformats_icons/
53. 53 http://www.hicksdesign.co.uk/journal/highlight-microformats-with-css
54. 54 http://www.webstandards.org/action/dwtf/microformats/
55. 55 http://suda.co.uk/projects/microformats/cheatsheet/
56. 56 http://www.bartelme.at/journal/archive/microformats_icons/
57. 57 http://www.xfront.com/microformats/
58. 58 http://www.blue-anvil.com/archives/introduction-to-microformats-a-look-at-hcard-hatom
59. 59 http://www.simplebits.com/notebook/2006/06/10/wineformats.html
60. 60 http://corkd.com/
61. 61 http://en.wikipedia.org/wiki/Microformat
62. 62 http://suda.co.uk/
63. 63 http://microformats.org/
64. 64 http://microformats.org/wiki/Main_Page
65. 65 http://microformatique.com/

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook