- Faruk Ateş
- Andy Clarke
- Kris Hadlock
- Robert Hoekman, Jr.
- 10 Steps to CSS Success: Browser, User, Author
- Like Mother Like Child: A Look at Inheritance in CSS
- Using Specificity to Resolve Conflicts
- Box Model Mastery
- Breaking Out of the Box: Using Abstract Thought to Inspire Progressive Web Design
- Microformats: Tomorrow’s Web Today
- Microformats: Managing Personal and Event Data
- Microformats: Understanding Elemental Microformats
- Transcendent CSS: Creating the Aesthetic Web
- Sarah Horton
- Miraz Jordan
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
Microformats: Understanding Elemental Microformats
Last updated Oct 17, 2003.
By Molly E. Holzschlag
Remember playing with blocks as a kid? One of the pleasures of my childhood was competing with my brothers to see who could build the biggest, tallest, coolest structure using blocks. In later years, the game Jenga, with which many readers will be familiar, took the place of building blocks, but still with the same essential concept in mind.
If you remember back to the towers you might have built using those blocks, or how you might balance the pieces in Jenga to create a stable tower, one thing becomes clear: The towers are made up of individual components, each with its own purpose. Combine them, and any number of configurations becomes possible. A similar metaphor might be a brick versus a brick building. The brick has individual features and an important role in the entirety of the building, but can also stand alone.
In order to clarify any confusion about how microformats work at their most basic, it's important to strip away any complexities and describe them in human terms. The best metaphor I've found for understanding individual microformats is to describe them as the building blocks or bricks that can make up a greater combined entity known as compound microformats.
In this article, I'll look at the most popular and implemented individual blocks, known as elemental microformats. Each has a unique purpose such as describing personal relationships, Creative Commons licensing, and so forth. Without understanding these elemental microformats first, it can be a bit confusing and daunting to the newcomer interested in working with microformats in any complex or integrated way.
Creative Commons and rel-license
Many readers will be familiar with the Creative Commons, but for those who are not, I'll provide a bit of background. Officially launched in 2001 by founder Lawrence Lessig, an attorney and author dedicated to preventing the increasing restrictions on copyright, Creative Commons emerged as a means to create licensing options that extend copyright law and give far more flexibility to creators in terms of how their work can be used. While CC licenses were built on U.S. law and terminology, work is being done to extend the idea worldwide.
If you've ever used Flickr or published a blog, you'll likely be familiar with CC licenses, which combine aspects of the following conditions:
- Attribution. Others can copy, distribute, display, perform the work and any derivative of that work provided they properly attribute the work to its author.
- Non-Commercial. All works and their derivatives are available for non-commercial (non-profit) reasons only.
- No Derivative Works. All original works may be used, but no derivative works may be used.
- Share alike. Others may make derivative works of your work but they must be distributed under the same license you are distributing the originating work under.
I publish the majority of my Flickr photos as "Attribution non-commercial share alike" which translates to anyone having the right to use and make derivatives of my photos tagged that way so long as they provide attribution to me, the purpose is non-commercial, and they publish the work and any derivatives using the same licensing.
The rel-license microformat allows a means for document authors to define the material in their works as having a specific CC license. Using the rel attribute with a value of license, along with the href attribute name with a URL value to the CC license in use, does the trick:
<a href=http://creativecommons.org/licenses/by-nc-sa/2.5/ rel="license">This material distributed under a CC attribution, non-commercial, share alike license</a>.
Now, any applications or services that support the rel-license microformat, such as Yahoo! Search, will index your license along with your material. Therefore, anyone searching for works that are available under the Creative Commons will have this material appear in the search results.
Managing Link Spam with rel-nofollow
In the never-ending lust for better rankings, a lot of "black hat" (spam or other bad practices) search engine optimization (SEO) techniques have emerged. One such method is to add more, but essentially irrelevant, links in blog comments, on Wikis, and anywhere else those evil spammers might find a way to get those rankings up. Not only is this a seriously frowned upon practice, but it causes problems for legitimate links, too.
By adding the rel-nofollow syntax to links within my blog, I can alert search engines such as Google that the link in question should bear no weight in the search engine ranking. Google, and other search engines that support rel-nofollow, will not follow the link or weigh it into their search relevancy.
<a href=http://www.molly.com/comment06.php rel="nofollow">I commented on this issue earlier.</a>
This comment link will now be essentially ignored by spiders, but useful for legitimate visitors interested in following the link.
Placing Votes in the Hands of the People With VoteLinks
The VoteLinks microformat is particularly interesting because it's a very simple elemental microformat, but its potential is enormous. VoteLinks can be used to help with refined searches on products, offer a voting mechanism for a blog post's popularity, or track real world elections.
VoteLinks uses the rev attribute to describe one of three types of voting:
- vote-for. This value is a positive vote.
- vote-against. A negative vote.
- vote-abstain. A vote of abstinence.
Here's an example of what I might include in a blog post when discussing my upset over current U.S. leadership:
<a href=http://www.whitehouse.gov/president/ rev="vote-against">I voted against George W. Bush</a>.
Defining Relationships with XFN (XHTML Friends Network)
XFN is the brainchild of Eric Meyer (Complex Spiral Consulting), Tantek Çelik (Technorati), and Matt Mullenweg (WordPress). The idea was to create a means of providing relationship information that would be useful in the growing social networking environment of the contemporary web, driven largely by weblogs. XFN is built right into WordPress, for example, where users can define their XFN relationships as they put their link lists together.
Relationship values are broken down into categories, with values residing in each as follows:
- Friendship. In this category, you can define a person as being a friend, an acquaintance, or contact.
- Physical. Only one definition is in this category currently, and that's the value of met. This is used to describe people whom you've physically met "IRL" (In Real Life).
- Professional. To define a professional relationship, you can use the values of co-worker or colleague, depending on the type of relationship it is.
- Geographical. Two values exist for geographical relationships in XFN currently: co-resident and neighbor. A co-resident shares the same street address as you do. A neighbor is more broad in scope.
- Family. The values of child, parent, sibling, spouse, and kin can be used to describe relationships. Spouse is generic in the sense it is used to describe anyone to whom you feel you are married, whether that marriage is considered legal or not. A spouse, unlike a romantic interest, is considered part of the family. Kin is a broad value that can be used to describe any family relationship, whether by blood or marriage as described here.
- Romantic. The values of muse, crush, date, and sweetheart can be used to describe romantic relationships. Note that muse is used to describe a broader, often non-romantic relationship that describes a person who inspires you.
- Identity. The me value allows you to provide a link to your own blog or materials and identify it as belonging to you.
Here's an example of a bit of my XFN blogroll:
<ul> <li><a href="http://tantek.com/log/" rel="friend met colleague muse">Tantek Çelik</a></li> <li><a href="http://www.stuffandnonsense.co.uk/" rel="met colleague friend sweetheart">Andy Clarke</a></li> <li><a href="http://www.meyerweb.com/" rel="met colleague muse">Eric Meyer</a></li> <li><a href="http://www.photomatt.com/" rel="met colleague friend">Matt Mullenweg</a></li> </ul>
As you can see, you can add values as you like, but be sure they are space separated.
A fascinating and emerging web phenomenon is the concept of tagging. Information Architect Thomas Vanderwal coined the term "folksonomy" which describes the organic evolution of human vocabularies. If that sounds a bit esoteric, go take a look at Flickr or anyone's blog, and you'll see tagging everywhere. The idea is that individuals can use any tag value to describe given content, and that content can then be categorized along with tags used by others. A good exercise to understand the organic nature of tagging would be to do a search on Flickr for the term "droplet" and see what kind of photos appear.
The rel-tag microformat is at the heart of tagging, being built into blogging, social networking and search software at a rapid pace. Perhaps the best example of rel-tag comes from Technorati, which uses tagging as a means of cataloging search results from blog posts.
Here's a reference to my site in regard to a story I told recently at a workshop during the Fundamentos Web conference in Spain. Here, you see a portion of the post, and then the rel-tag reference to "fundamentos web"
<p>Aunque esto no ocurre solo en España. Una experiencia similar con <a href="http://www.orange.com/">Orange</a>, en Francia, nos contó <a href="http://molly.com/">Molly E. Holzschlag</a> en <a href="http://www.fundamentosweb.org/2006/programa/#taller">Designing for web 2.0</a>.</p>
<p class="tags">Tags: <a href="http://technorati.com/tag/fundamentos+web" title="See the Technorati tag page for ’fundamentos web’." rel="tag">fundamentos web</a></p>
Now, anyone searching for information about the conference based on that tag will also find my blog; if they are searching for me, they'll find this person's blog post, too. This demonstrates the rich results that a simple, elemental microformat can provide.
From the Elemental to the Compound
If you let your imagination get creative for a moment, it becomes fairly easy to see how elemental microformats can be combined to create more complex results.
Let's say I wanted to build a search engine that would retrieve anything tagged with "movie" that has been voted with a vote-for by only individuals defined as friends. This would provide me far more granular and personalized results. It’s undeniable that elemental microformats are strong building blocks for creating more effective user experiences, stronger social networks and better search results.