A Big Day for Microformats

Today was a big day for Microformats - very big. First, they announced that the new value-class-pattern is ready for implementation. The value-class-pattern is a great step forward, as it provides needed accessiblity improvements, and in my opinion, gives the developer a bit more flexibility over how to structure their markup.

That was a pretty big announcement in its own right, and I was very pleased to see the new pattern approved and garnering a bit of buzz. That announcement, however, was trumped by Google announcing that they will be starting to index Microformats and RDFa and using that data to enrich their search results.

Microformats has been around since 2003, but the adoption has been a bit sluggish. While overall quite easy to implement, it can been difficult to demonstrate the value of using Microformats at times due to a lack of major support, and therefore, major incentive. That shouldn't be a problem anymore, because Google is definitely providing that major incentive.

How They'll Be Used

Google has a good vision for how to make use of the harvested data in their results. They'll be providing these "rich snippets", as they're calling them, to provide both additional content and meaning about the pages in their search results. For example, a page featuring reviews will feature the average star rating, and number of reviews the page contains, right there in the search results.

In addition to reviews, this initial launch will also provide "rich snippets" for people. Using contact information parsed from sites like LinkedIn, for example, search results may indicate a person's job title and location, to help users determine if the results they are looking at are likely to be associated with the person they're looking for.

On top of that, Google plans for to use these Microformats to allow users to be a bit more specific with their searches. An example given was that a user could search for all reviews on a printer where the average rating was over 3 stars. This allows users to tailor the content they receive by the context in which they are interested.

Not only does this new feature enhance the user experience, but the use of Microformats and RDFa data should also provide signifcant value for sites smart enough to markup their content using them. According to studies done by Yahoo on similar enhancements to search results, they found these kinds of improvements resulted in a significant improvement in click-through rates, in some cases up to a 15% increase.

More Coverage

There's been lots of great coverage on Google's announcement, and I highly encourage you to have a look at some of the insights offered in the posts below:

• Introducing Rich Snippets


• Google Announces Support for Microformats and RDFa


• Google Engineering Explains Microformat Support in Searches (Interview)


• Google Search Now Supports Microformats and Adds "Rich Snippets" to Search Results

In addition, if you haven't explored Microformats, I encourage you to do so now. With Google starting to index Microformats, and in turn leverage the harvested data to enhance search results, whether or not Microformats are valuable is no longer debatable.

Building a Stronger DOM

In Nate Koechley's excellent talk on Frontend Engineering, he talks about the importance of building a "stronger DOM". By marking up your site with meaningful elements and attributes, you give your markup more value and provide a richer experience for both users and machines.

In addition, a strong DOM provides you with numerous attributes and elements that you can make use of to style the content to your hearts desire. This gives you much more power and control with your CSS, and helps to greatly decrease your usage of extraneous divs and classes

A very quick way to improve your markup skills, and therefore the value of your content, is to expand your knowledge of HTML elements, and start making use of a few you might not have been aware of.

and

The fieldset element is used to group related controls and labels within a form. They are a great way to help make your form easier to understand, and more accessible for speech-navigated user agents.

It should be used in conjunction with the legend element to provide an even richer and more usable experience. The legend element basically defines a caption for the fieldset. Here's an example of how you could use these elements in your markup:

3. Team Captain


4. Name






7. Player #2


8. Name

An often forgot element that you can start using immediately in your text is the q element. The q element is very similar to the blockquote element, but should be used in a different context. The blockquote element is meant to be used for longer, block-level quotes. The q element, on the other hand should be used for short quotes.

All major browsers, other than IE6 and IE7, will automatically insert quotation marks around the content within the q element, according to the HTML spec. There's a few ways to work around this, but my favorite solution is the one proposed by Stacy Cordoni in an A List Apart article from 2006. Her solution is to remove the quotes from around the q element using the :before and :after pseudo-classes to even the playing field. Then, with each of the major browsers not rendering quotes, you can insert them directly into your markup, ensuring that all browsers render your quote the same.

• "Remember that drover, the one I shot in the mouth so's the teeth come out the back of his head?", asked Munny.

The cite element is used to identify a reference or citation to another source, like a book or another website. By default, each of the major browsers render the cite element in italics. Making use of our q element example, adding the cite element would give us something like this:

• "Remember that drover, the one I shot in the mouth so's the teeth come out the back of his head?", asked Munny.

The dfn element is used to markup the defining instance of a word or phrase. It's important to note that it is not intended to markup the actual definition itself, but instead the word or phrase being defined. Most major browsers will render the content within the dfn element in italics, though of course you can alter that as you wish with CSS.

• The dfn element is used to markup the defining instance of a word or phrase.

and

Here's one for anyone who writes any sort of articles online. You can use the ins and del elements to identify content that has been either inserted or deleted since the content's publication. The ins element, by default, is underlined, and the del element, by default, is striked through.

• SXSW's parties are a great time to booze it up with mingle with fellow developers.

The address element is slightly misleading. One would think you would use it to mark up a physical address, but that's not necessarily the case. The address element is actually intended to contain the contact point for the document containing it. While this certainly could contain a physical address, it doesn't have to. It could house any sort of contact information provided that it is contact information for the author and/or owner of the document in question.

For example, I could use the address element to provide my contact information since I am the owner of this article, like so:

• tim@timkadlec.com

By default, the address element is rendered in italics in each of the major browsers.

See For Yourself

If you're interested, I put up a page with examples of each of the elements above. I did not apply any CSS, so you can see how each element is rendered by default in different browsers.