What are microformats?


Microsoft founder Bill Gates has been a big supporter of microformats, saying they're needed for future innovation.
Microsoft founder Bill Gates has been a big supporter of microformats, saying they're needed for future innovation.
StephaNe De Sakutin/AFP/Getty Images

Technology has always been about building upon the simpler foundation in order to make the tool do more and be more useful. The concept of the wheel led to the horse-drawn cart, which led to the automobile. Automobiles without suspension systems, which provided drivers and passengers with bumpy, uncomfortable and potentially unsafe rides, led to the development of springs on cars, giving them better shock absorption and smoother travels.

The same idea applies to the major developments in computer and Internet technologies. While the early stages of the Internet consisted of simple pages with text and images (what some refer to as Web 1.0), today Web sites try to be as deeply interactive as possible, employing flashy animations and easy-to-use applications (known by most as Web 2.0). The Web has become a vast labyrinth of connectedness: Sites hyperlink to each other, bloggers and social networkers post interesting links while keeping their friends updated and people perform any number of searches on news articles, contact information, address locations and so on.

­But some feel this is just the beginning of what will be a dramatic sea change in the landscape of the Internet. One of the most important developments that's creating a significant buzz in the tech industry is the adoption of microformats, small snippets of Web code that help standardize formatting. As everyone gets more connected, backers of the microformat standard hope the practice will help make building Web pages and the end user's experience easier, smoother and richer than ever.

­Like many of today's emerging Web standards, like the phrases Web 2.0 and Web 3.0 and concepts such as open source, microformats are as much a philosophy as they are a specific set of rules. What exactly are microformats? Are they something you'll see on a Web page, or are they only rules that developers and Internet browsers will use and acknowledge? What will they do, and why are they considered to be so important for the future of the Web?

Web Documents and 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?

Tag Attributes

Supporters of microformats believe that designers like Scott Dvorin, shown working on print and online magazine The Knot, can use microformats to make the Web a deeper, more connected experience. 
Supporters of microformats believe that designers like Scott Dvorin, shown working on print and online magazine The Knot, can use microformats to make the Web a deeper, more connected experience. 
Marvi Lacar/Getty Images

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.

Related HowStuffWorks Articles

More Great Links

Sources

  • Cederholm, Dan and Tantek Çelik. "What are microformats?" Microformats.org Wiki. May 30, 2008. (Aug. 25, 2008) http://microformats.org/wiki/what-are-microformats
  • Costello, Roger. "Purpose of microformats." Tutorials On Microformats: Making Web Content Smarter. March 11, 2007. (Aug. 25, 2008) http://www.xfront.com/microformats/Purpose-of-Microformats.html
  • Dubinko, Micah. "What are microformats." XML.com. March 23, 2005. (Aug. 25, 2008) http://www.xml.com/pub/a/2005/03/23/deviant.html
  • Mitchell, Andy. "Introduction to microformats." Why Microformats? 2006. (Aug. 25, 2008) http://whymicroformats.com
  • "What can you do with microformats?" Microformats.org Wiki. May 30, 2008. (Aug. 25, 2008) http://microformats.org/wiki/what-can-you-do-with-microformats