What are microformats?

When someone creates a page they want to display over the Internet, they use Web documents. A Web document is essentially the building block or blueprint for any Web page: Developers place certain pieces of code, called tags, around the words they want to show up. These tags format the text and images on the page, so that if someone wants a block of information centered, for instance, a specific bit of code will tell your browser to do just that.

Microformats are simple pieces of text that developers of a Web page can place within the code of a Web document. The important thing to remember is that microformats work with most types of Web documents, including HTML, XHTML and XML.

For example, here's some typical HTML code that lists someone's personal information -- the person in question might want to use this block of text as an online business card.

<div>

        <div>John Smith</div>

        <div>HowStuffWorks</div>

        <div>

            <span>1234 Brain St.</span>

            <span>Atlanta</span>,

            <span>GA</span>

            <span>12345</span>

        </div>

        <div>Phone #: 123-456-7890</div>

</div>

This bit of code will end up looking like this on a Web page:

John Smith

HowStuffWorks

1234 Brain St.

Atlanta, GA 12345

Phone #: 123-456-7890

In this example, a "div" represents a block of information -- everything within that first "<div>" and the final "</div>" will remain apart from other pieces of text. It's best to think of it somewhat like a double-spaced paragraph break you use in a Word processor, except it won't actually show up on a Web page when someone looks at the information. The "span" tag, on the other hand, is very similar to the "div" tag, except it groups text elements together in one block.

These tags don't have very much semantic meaning -- they aren't something people can look at to gain an understanding of the purpose of the block of text. You could say "div" looks a little bit like the word "divide," but that's about it as far as it goes; however, within the HTML standard, there are other ways to create the same kind of business card. Here's another example:

<p>John Smith<br>

HowStuffWorks<br>

<blockquote>1234 Brain St.<br>

Atlanta,<br>

GA<br>

12345<br></blockquote>

Phone #: 123-456-7890</p>

The business card will show up on the Web site in essentially the same way, but the tags used are more meaningful to us: "p" stands for "paragraph," to tell the browser to start a new paragraph, and "br" stands for "break," which tells the browser to add a line break and start a new line. It's a more straightforward option than the "div" and "span" tags.

But this still wasn't enough for the people supporting microformats. The previous code succeeds in creating a perfectly fine list, but the code itself doesn't tell the developer inserting the information that the type of text listed is specifically a business card. What's a forward-looking developer to do?

Most tags have attributes, extra notations that can change certain aspects of the text in question. They act as a sort of label that's attached to a specific piece of data; it's like saying to the computer, "The majority of this text you can treat normally, but for this one line I'd like you to present it this way." If you're using the "span" tag, for example, and you want to make a piece of text show up red on a Web page, you could add the "style" attribute:

<span style="color: #0000ff;">HowStuffWorks</span>

Early on, people in the microformat community were looking around the HTML standard for more meaningful attributes -- most importantly, they wanted to use what was already available within HTML instead of scrapping everything and starting all over again with a completely different markup language.

What they found were three important attributes:

class - Allows developers to identify similar elements across several Web documents

rel - Describes the relationship of a linked document to the current document

rev - Describes the reverse of rel: The relationship of the current document to a linked document

Developers can add any one of these to an HTML tag and follow up with an equal sign and an easy-to-understand semantic label in quotation marks.

Take, for instance, the class attribute. If someone wanted to list the address "1234 Brain St.," it could look very simply like this in a Web document:

<span>1234 Brain St.</span>

This, however, is how that same code would look after adding a microformat:

<span class="street-address">1234 Brain St.</span>

The initial tag can be anything, whether it's "span," "p" and so on. The key to microformats is in standardizing the semantic labels you see in quotes.

So what does this accomplish, not just for the developer, but for the average Internet browser? Once these attributes are added to the code, specifically designed Web-based aggregators -- services that check for information around the Internet at regular intervals and collect it in one place -- can seek out relevant microformats. An hCard aggregator, for example, could search the Web for any pages that contain hCard microformats (which, at their most basic, look like class="vcard" within a Web document) -- a business could then easily pull in a significant amount of potential client information on a regular basis.

The microformat community is essentially saying, "These parts of HTML work really well; they're easy to use, and both people and computers understand them, so let's keep building upon this idea." Although we won't see microformats used extensively across the Web for a while, supporters of microformats and open source mark-up language are continuing to standardize and remain excited about the possibilities in store for an even more connected online experience.

For lots more information on microformats and emerging Web technologies, see the next page.