Every so often as I meander around the internet I find little bits of geek-dome brilliance in the markup of a site.

This morning, I was reading For A Beautiful Web, a site put out by Andy Clarke. This site, by itself is a great resource, but that’s not why I’m writing this.

I left a comment on a recent blog post, and since I had also just written a custom style for this site with Stylish, I noticed that the comment I left looked a little funny. It looked like the style I just wrote for a blockquote. So I investigated.

Sure enough:

<li id="r450" class="odd ">
<div class="meta">
<h4 class="vcard"><a href="#r450" title="Permalink this reply">#1</a> &bull; <span class="fn url"><a href="http://www.csskarma.com">Tim Wright</a></span></h4><abbr title="2009-03-12">Mar 12th 2009 &bull; 4:05 <sup>pm</sup></abbr>
</div>
<blockquote><p>It always seems like company heads generally agree that getting together and talking for the greater good is a positive thing. Unfortunately, it never seems to happen. My guess is that they don&#8217;t see the value in improving their product to us (the developer), only the general user who generates the majority of the revenue.
</p>
<p>
It&#8217;s unfortunate that not many people higher up actually give back to the community as a whole.
</p></blockquote>
</li>

Not only a blockquote, but a dash-o-microformatting too.

Anyway, I thought this was a brilliant addition to blog comments, and it makes perfect semantic sense, and I really hope it catches on. I love it, great job Andy!

P.S. If anyone wants to meet up at SXSW next week DM me (or e-mail me), I’ll be there for all of the Interactive and some of the movies.

Because I’m a web dork (nice way to start a post, huh?), I was poking around YouTube last weekend and decided to crack it open in FireBug.

I was on YouTube’s MayerMusic channel fiddling around with the video info section and notice that some of the info was wrapped in a quasi familiar class “vfacets”. This appears to be some sort of Microformat; but none that I’ve ever seen.

After seeing that, I decided to do a little digging (digging = 5 mins of Googling), and eventually found a pretty undetailed page about group examples of Microformats.

Generally, I find that Google’s front end development is a disgrace to the Internet (no offense…), but it seems like they’re buying into the concept of Microformats. With that in mind I thought I’d talk about how Microformat groups could be used.

Usage

Many of us are familiar with the most common types of Microformats (hCalendar, hCard, hReview, and XFN). There are also many that are still in draft form like hResume, geo, and rel-directory. However, it seems that a new type could be emerging for grouping information.

The link above listed out 4 examples of major sites using Microformat groups: YouTube, Magnolia, Linkedin and Flickr. I really like how Google (youtube) is marking it up though, so I’m going to get in to that.

YouTube vEntry markup

<div class="v120vEntry">
<div class="vstill">
<a href="/user/spoiledmilk"><img src="2.jpg" class="vimg"></a>
</div>
<div class="vtitle">
<a href="/profile?user=spoiledmilk">spoiledmilk</a>
</div>
<div class="vfacets">
<span class="grayText">Joined:</span> August 02, 2006<br>
<span class="grayText">Videos:</span> <a href="/profile_videos?user=spoiledmilk">21</a>
</div>
</div>

In marking up user information they are using:

• ventry as a wrapper
• vstill for the user image link
• vimg for the image itself
• vtitle for the user’s name
• vfacets for, what seems to be, general information

I’m wondering why Google is going with this. In the past I think it’s safe to say that they don’t really do things like this unless they’re planning to use it in something they build. Not to take shots at Google, but they don’t really do things for the greater good of the web community (correct me if I’m wrong).

Consistent user tagging

The basis for using something like a vcard class is to let the browser, user, spambot, or software know that a page contains contact information (and your now beautifully marked up e–mail address). This same principle applies to Google’s vEntry.

Let’s consider that Google is building a large social networking platform; I know that the main complaint I have with all these new networking sites is that you have to constantly rebuild your contact list. Marking up a member’s information in a consistent way would aid in search and ease the pain of finding those Twitter followers (for example) we all love so much. Or even for building some sort of Internet phone book.

What are they scheming?

What’s Google planning? What else can be done with this new microformat? Did I completely miss a huge glaring detail here?

Maybe this isn’t even Google code, it could be left over from when they bought out YouTube. I guess we won’t know for sure until we can pick apart Google’s brain and find out what’s going on in there.

In the mean time, watch out for this new Microformat, I have a feeling they’ll be popping up in other Google sites as well.