Like HowStuffWorks on Facebook!

What are microformats?

        Tech | Computer

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?