From the Archives: An Introduction to Microformats

Today’s RootsTech keynote speaker introduced us to “microdata” which already provides a way to link information from multiple online sources. This technology expands on the microformats movement which has been functioning for some years already. The article below was originally written for my old Family Matters blog in 2009 and should give you a bit of background on what Jay Verkler spoke of in his address.

HTML (Hyper-Text Markup Language) is the language of the Web. It uses tags to identify text that needs to be bolded or italicized or should be displayed as a bulleted list or an indented block quote. Thanks to today’s blogging and content management software, many of us never see or “touch” the HTML code as we write our stories or post our comments.

While HTML makes our content easier for the human eye to read, it’s still just a jumbled collection of characters to the computers that manage the Web. Sure, search engines do a great job of finding specific combinations of characters and pointing us to them, but they don’t have a clue what those characters represent. As more and more useful and interesting information items get posted online, there needs to be a way for the computers holding and managing this content to recognize it for what it is.

A grassroots effort began to develop a standard set of attributes that can be added to existing HTML tags to identify the content item within the tags. Their results are called microformats. Here’s a very simplified example of what microformats can do.

Quick HTML lesson . . . Notice that each content item is surrounded by a tag set – the “div” and the “/div”. This tells the computer to apply some kind of formatting or layout to all the text within the tag set. The code appears on your Web page much like this:

Denise Olson
Moultrie Creek
904-555-1234
http://moultriecreek.us

A human will immediately recognize this as a person’s name, company, phone number and linked site address. To a computer, it’s a bunch of text and a linked URL. Now, add a few attributes to that same HTML code and things change dramatically.

Using the same HTML “div” tags, additional attributes have been added to tell the computer not only how to format this content but what kinds of information are contained within the tags. And, because these attributes have no impact on the display purpose of the HTML tag, the human eye will still see the exact same display as in the original example.

As you might imagine, this idea is really catching on – big time! There are microformat standards for several information types – contact information (hCard), events (hCalendar), reviews (hReview), resumes (hResume) and even social relationships (XFN). Our community will find the proposed citation standard particularly interesting. You can get details on these standards at Microformats.org.

Putting Microformats to Work

Now that you have a basic understanding of the concept, I’m sure you’re thinking that this stuff is way above your head. WRONG! Unless you’re the geeky type that likes getting into code, you don’t have to do anything. Others have already done it for you. More and more applications and Web systems are putting microformats to use for you. Here’s one example:

Many of us bloggers use MyBlogLog to connect with other bloggers and keep up with each other. If you click on the link to my profile, you’ll see personal information similar to the image below.

There are two icons next to the photo. On the left is the vCard icon and on the right is the hCard icon. If you click on the vCard icon, you’ll be able to download a vCard of my contact information which you can then import into your Outlook, Thunderbird, Address Book or whatever application uses vCards. vCards have been around for quite a while and provide a way to move contact information from one desktop application to another. If you click on the hCard icon, a screen of contact information appears similar to this one.

What you will actually see depends on your relationship to me. Huh? Relationship? How does MyBlogLog keep up with relationships? When you add another MyBlogLog member as a contact, you’re asked to identify that person as a contact, friend, family or fan. In your profile, you define what items of information you want to include and who can see each type. For example, you might choose to only make your email address available to family and friends. When you identify your relationship to each contact you add to your neighborhood, MyBlogLog uses the social networks (XFN) microformat to manage that information and make these individualized displays possible.

Another example is the Firefox addin called Operator. It allows Firefox users to take advantage of microformatted content as you browse the Web. Using Operator, you can quickly add contact information from a MyBlogLog (or any other microformat aware) profile to your Yahoo! Contacts (which is also microformats aware). Notice that Operator can be used to display maps too.

These are just a few examples of the beauty of microformats. There are many others and the list continues to grow. From sharing contact information, to finding locations on maps, to keeping up with relationships, microformats does it in a simple but very functional way. Now that you know what they are, watch for ways you can take advantage of them to help your research and networking efforts.

For more information: