This week, I started my new internship at Viget(!), and read through a super impressive, organized list of their standards and best practices. In doing so, I came across two interesting concepts that I had previously never heard of: microformats and microdata.
Here is a brief summary of each and what the difference is between them:
Microformats
Microformats are a community-based approach to marking up content based on previous usage patterns (a lot of people refer to this approach as “paving the cowpaths”). They are essentially an open set of standards and HTML patterns used for items such as blog posts, resumes, calendars, reviews, etc.
Though you can use microformats for a variety of content, the most popular use is definitely the hcard – which is basically like a business card for your website. To create one, you first wrap a block of content in a “vcard” to state that it is a microformat – then use basic hcard properties such as fn (fullname), email, tel, etc. in a class inside of the vcard. Some properties (such as name and adr (address)) have an additionally specific level of markup. Adr, for instance, allows you to specify postal-code, region, and locality. Here’s an example:
<div class="vcard"><span class="fn">Harry Potter</span>
<img class="photo" src="http://harrypotter.com/profile.jpg"/>
<a class="email" href="mailto:harry@harrypotter.com">Email</a>
<div class="adr">
<div class="street-address">4 Privet Drive</div>
<span class="locality">Little Whinging</span>,
<div class="postal-code">39203</div>
</div>
<time class="bday">1992-22-07</time> birthday
<div class="category">wizard</div>
<div class="note">The boy who lived.</div>
</div>If that confused you, try referring to this handy hcard generator.
Microformats have been around for a while, and had the strongest impact around the time this article was written in 2007. Though they are still discussed and highly debated, official implementation for most of the specification has been spotty, and community momentum has since shifted.
Microdata
Used by popular search engines such as Google and Yahoo, microdata is a set of markup vocabulary that makes it easier for search engines to parse through your website and pull out key information. You can mark up any html element by using this vocabulary, but it seems to be best suited to blocks of information, because the syntax is organized in a hierarchal outline of schemas (hence, the reference page is schema.org).
Basically, you mark up the containing element of a data block as an “itemscope,” which you can further specify by adding an “itemtype,” linking that to a section of the schema website. You would then specify each bit of information through an “itemprop.” Don’t be confused. Here is a basic example:
<div itemscope itemtype ="http://schema.org/Event">
<h1 itemprop="name"> Webcatz Conf </h1>
<span>Date:
<span itemprop="startDate"> June 5, 2014 </span>
<span itemprop="endDate"> June 7, 2014 </span>
</span>
<span>Featuring:
<span itemprop="performer"> Nyan Cat </span>
</span>
<a href="../afterparties/NyanCatDisco"itemprop="subEvent"> Official Disco After Party </a>
</div>Microdata is the preferred method now because it is being concretely used and currently being implemented by search engines and applications (mostly Google is to blame for popularizing this). It gives a great way to organize and mark up data, as broad as “person,” and as specific as the “biomechanicalClass” of a joint. I don’t even know what that is… and I literally couldn’t make it up. It’s actually pretty fun (if you’re a nerd like me <3) to read through the entire list of schemas.
TL;DR: Mark up is good for you & your site.
(& another great article for further reference.)