On July 18, 2009 at Refresh Doylestown 10, I presented Elemental microformats, part 1. The following article summarizes that presentation.
Elements & compounds
In a presentation from 2005, Tantek Çelik introduced the concept of HTML compounds, markup patterns composed of more than one HTML element. That terminology has since been extended to microformats. Compound microformats are those that use more than one HTML element, while elemental microformats use only one. At Refresh Doylestown 10, I presented an introduction to elemental microformats.
Extending HTML
Microformats extend HTML using HTML’s built in extension mechanisms. These mechanisms are the META element (in conjunction with the @name and @content attributes) and the @rel, @rev, and @class attributes. Microformats avoid the use of the META element due to problems associated with invisible data. Also, I’m going to leave @class for another discussion, so let’s look at @rel and @rev.
@rel and @rev are used with the A and LINK elements and define relationships between documents. @rel defines the relationship of the linked document (the document indicated by the @href value) to the current document. Consider the following example, which should look familiar.
<link rel="stylesheet" type="text/css" href="styles.css">
In the example above, styles.css is the stylesheet for the current document.
@rev, on the other hand, defines the relationship in the opposite direction—the relationship of the current document to the linked document. Consider the example below.
<link rev="markup" type="text/css" href="styles.css">
This example states that the current document is the markup for styles.css. This example may seem a bit unusual, and in fact, the use of @rev is uncommon. Partly for this reason, @rev has been removed in the current draft of HTML5.
So let’s take a closer look at @rel instead. HTML 4.01 includes several predefined link types (values for @rel and @rev). A brief aside: The authors of HTML 4.01 intended for browsers to discover these link types in use and use them to aid navigation. Personally, I think this could have been a useful feature of HTML, but implementation has been very poor. As far as I know, only Opera will display these links to the user, using the Opera navigation bar.
Returning to microformats, the part of the spec that is of most interest is the following:
“Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile to cite the conventions used to define the link types. Please see the profile attribute of the HEAD element for more details.”
In other words, authors are not limited to the predefined values in the specification. Instead, authors may use any value to describe the relationship of one document to another. The specification suggests using a profile to define author-created values. Although most microformats include such a profile, most authors do not find it necessary to use them.
rel-license
rel-license is a simple microformat that uses a custom @rel value to indicate the license of a web page.
Many web pages already contain a link to a license, typically in the footer. For example:
<p>Licensed under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 license</a>.
The rel-license microformats involves nothing more than adding a @rel attribute set to the value of “license.”
<p>Licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 license</a>.
The document you are linking to is now semantically marked up as the license for your web page. So why would anyone want to mark up a license? Well, adding extra semantics to your web pages is generally a good thing. As we make our web pages richer and smarter, clever developers will continue to find ways to leverage the added semantics. However, if you’re using a Creative Commons license, you will benefit from an immediate advantage: improved findabililty of your content for those searching for Creative Commons works.
Creative Commons Search allows users to search Google, Yahoo, Flickr, and other services specifically for resources that are Creative Commons licensed. This is a nice immediate benefit and may just be a precurser to even more SEO and findability improvements to come in the future.
The argument to not use rel-license is harder to make. It’s so easy to add this attribute to your markup, why not do it?
A few additional notes
rel-license is scoped to the page unless it has been rescoped by its container. This means that when you mark up a page with rel-license, you are indicating that the linked license applies to the whole current page (not a portion of the page, nor your entire website). However, there are are certain containers, such as hReview and the HTML 5 SECTION element, that re-scope rel-license to apply to only a portion of the page. This is particularly important for aggregators and feed readers that my display multiple reviews from different sources within one page. Each review should maintain its own license.
Also note that a page may have multiple licenses. Just link to each license, and add rel="license" to each.
Not covered here
I covered a few more details in my original presentation that I will not cover here.
- We reviewed the microformats principles and discussed how rel-license conforms with each.
- I briefly discussed Creative Commons licensing and how to choose a license.
- I covered some HTML and microformats validation tools. See Tantek’s favelets page for some cool validators.
- We discussed how to style rel-license with CSS. View source on example 1 and example 2 for some ideas.