Using Microformats: Collaboration and the Semantic Web

Dr. Karl Stolley, Illinois Institute of Technology

Too visual, too limited to web browsers. That’s how web production has trended since the Web’s inception; our field is no different. Now, that’s not to discount the importance of visual design (it is absolutely important to the digital rhetorical situation), or to suggest that web development should proceed without intensive testing in a variety of browsers across different devices and operating systems.

What I would argue, though, is for a rethinking of the visual, browser-destined view of web production, and the WYSIWYG tools that have influenced such a view.

Microformats are evidence of a clear need, one that will only become more pressing, to reevaluate not the place of visual design with respect to the Web, but how design—visual and functional/behavioral—emerges from structured content, particularly content structured by hand in XHTML.

What are Microformats?

Microformats.org, the clearinghouse for microformat specifications and host to numerous tutorials and references plus a growing community of developers, describes microformats as “a set of simple, open data formats built upon existing and widely adopted standards” (http://microformats.org/about/). In translation, microformats are collaboratively established/emergent adjustments to Plain Old Semantic HTML (POSH) or preferably XHTML that allow information to travel freely out of and among different pages/sites on the Web and applications. They function and are established within the W3C specifications for HTML/XHTML. In other words, microformats are part of the emerging “semantic Web,” which Tim Berners-Lee suggested would be “a web of data that can be processed directly or indirectly by machines” (Weaving the Web, 2000, p. 177).

For example, I can list my name, institutional affiliation, and URL on a web page, and users can display that on their computer or mobile device. But to get my information into their digital address books, they would have to copy and paste it: a web browser has no way to know, at least not from simple HTML or visual design, that the page it’s displaying contains contact information. It’s my responsibility as a web author to more explicitly and meaningfully structure content.

Microformats, then, allow web authors to provide additional structural meaning to their web pages—meaning that web-enabled devices can in turn understand and utilize for human purposes. With the hCard microformat in place, along with a microformat-aware environment (e.g., Firefox w/ the Operator add-on), transferring someone’s contact information from her web page to your address book is a one- or (for some address books) perhaps two-click operation. Simple cutting and pasting, given the multiple fields of a given address book entry, would be a many-click operation.

Some Basic Examples

What follows are descriptions of and very basic uses for the rel-license, rel-tag, and hCard microformats. Consult the current microformats list at microformats.org to learn about other microformats and advanced features of the microformats featured here.

rel-license

In addition to encouraging Web authors to license their work in some way, perhaps using a Creative Commons (CC) license, rel-license gives added structural meaning to a page that links to the license terms, namely that that page’s content is issued under a particular content license.

Here is the license, presented in a simple hypertext link:

<!-- XHTML -->
<p>The content on this page is issued under a 
  <a href="http://creativecommons.org/licenses/by/3.0/us/">
    Creative Commons Attribution 3.0 United States License</a>.
</p>

Which would render something like:

Adding the rel-license microformat is as simple as adding rel="license" to the link:

<!-- XHTML -->
<p>The content on this page is issued under a 
  <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/">
    Creative Commons Attribution 3.0 United States License</a>.
</p>

Which would render exactly like the previous example (remember that XHTML is only a structural language):

If you are using a CC license, chances are this microformat already exists on your page, as rel-tag is included in the code provided through the CC license chooser. At present, rel-license is also used by both Yahoo!’s Creative Commons Search and Google Advanced Searches (see also http://microformatique.com/?p=60). But it’s not hard to imagine a future where rel-license could be gathered by citation programs like Zotero, or even used to alert users copying and pasting text and images from their web browser to other locations.)

rel-tag

Free-tagging is an established practice among bloggers and users of content management systems; rel-tag specifies a given term in a URL schema as a “tagspace” for some piece of content. This tagspace can be passed along to allow readers to browse tagged items on sites like del.icio.us and Flickr, as in the Tagspaces actions enabled by the Operator extension in Firefox.

<!-- XHTML -->
<a rel="tag" href="http://myblog.com/taxonomy/term/rhetoric">rhetoric</a>

The Operator extension, in turn, provides an array of options, based on the “rhetoric” tagspace, as seen in this screenshot:

Note, however, that any use of rel-tag relies on the structure of the URL to determine the tagspace. A number of blogs are implementing rel-tag with misconfigured URL schemas that point to numerical representations of tags, rather than the actual tag name. For example, in the following snippit of code,

<a rel="tag" href="http://myblog.com/taxonomy/term/90">rhetoric</a>

the “tagspace” is not rhetoric, but 90. There are two interesting issues here. One is to encourage blog and other site developers to opt for a normalized, plain-language URL schema (e.g., http://myblog.com/taxonomy/term/rhetoric). In addition to properly powering the rel-tag microformat, a switch to a better URL schema will likely aid in web search results: humans (and web spiders) are more interested in “rhetoric,” not “90.” Additionally, just as link text can be anything we want it to be, the rel-tag microformat, by relying on the URL for the tagspace, remains useful when creating links to tagspaces from related text.

Additionally, rel-tag can provide a structural hook to style tags differently from normal links (though only for standards-compliant browsers that understand attribute selectors). Here is a simple paragraph that contains both a “normal” link, plus a tagspace link for wikis:

<p>Here is just a regular link to <a href="http://www.wikipedia.org">Wikipedia</a>. And
here is a tag for <a rel="tag" href="http://myblog.com/wikis">wikis</a>.</p>

The following CSS will style the normal link and the tag space link differently (again, only in standards-compliant browsers; non-standards-compliant browsers like Internet Explorer 6 and earlier will render both links the same):

/*CSS*/

/*Style regular links as blue with no underline*/
a { 
  color: blue;
  text-decoration: none;
}

/*Style tag links as red blocks with white text*/
a[rel=tag] {
  color: white;
  background-color: red;
  /*Pad the text from the edge of the color area:*/
  padding: 0px 2px 0px 2px;
}

The actual rendering:

From this simple example, it should be clear that microformats provide not only added behavior in microformats-aware environments, but can enhance the visual design of a web page in a clear, purposeful way.

hCard

Unlike the rel-license microformat, rel-tag actually demonstrated the web browser doing something with the microformatted information. The hCard microformat goes a step further, demonstrating how a “semantic Web” of information can move web-available discourse to points beyond the browser.

The hCard microformat, which is based on the widely used vCard standard for digital business cards, can often easily be added to extant Web pages, particularly personal home pages.

It is not unusual for people to put their names on their home pages, sometimes in copyright statements with links to the home page of their Web addresses. This can be a simple hook for the hCard microformat. To write the microformat requires thinking about the structure; the base class, vcard (yes, vcard, and not hcard, as one might expect), must be placed with a tag that contains the entirety of the information a writer wants to structure. Additionally, the fn class assumes a two-part full name (assumed to be first name, last name); url takes the value of the href attribute on a link:

<address class="vcard">This page created by 
  <a class="fn url" href="http://johnexample.com">
      John Example
  </a>.</address>

That bit of code might render something like this:

But now it has the added functionality of the hCard microformat, as in this screenshot of Operator:

rel-license and rel-tag were only minor modifications to existing tags, as was this first hCard example. But hCard can be deployed in a variety of documents, and with far more rich structures of information. For example, perhaps a professor has the following on her personal website:

The <body> portion of this page’s source code might look something like:

<body>
<h1><a href="http://janeexample.com/">Dr. Jane Example</a></h1>	
<p>I am an Assistant Professor of Rhetoric and Composition at Beispiel University. 
  My interests are in writing program administration, first-year writing, and classical
  rhetoric. You can email me at jane@janeexample.com, or reach me by postal mail at:</p>
<p>Random Hall 321<br />
  1060 West Addison<br />
  Chicago, IL 60613</p>
</body>
	

We know, as humans, that there is a lot of information here: Dr. Example’s name, that the link her name points to is her own personal website, her job title, her university, plus her email and postal addresses. The browser only knows that there are some chunks of text on the page, plus a URL (but what that URL refers to, or whom it belongs to, is a mystery).

Thoughtful, accurate use of the hCard microformat will make the page’s information understandable to machines:

<body class="vcard">
<h1><a class="url fn n" href="http://janeexample.com/">
  <span class="honorific-prefix">Dr.</span>
  <span class="given-name">Jane</span>
  <span class="family-name">Example</span>
  </a>
</h1>	
<p>I am an <span class="title">Assistant Professor of Rhetoric and Composition</span>
  at <a class="url org" href="http://www.beispiel.edu/">Beispiel University</a>. 
  My interests are in writing program administration, first-year writing, and classical
  rhetoric. You can email me at <span class="email">jane@janeexample.com</span>, or 
  reach me by postal mail at:</p>
<p class="adr">
  <span class="extended-address">Random Hall 321</span><br />
  <span class="street-address">1060 West Addison</span><br />
  <span class="locality">Chicago</span>, 
    <span class="region" title="Illinois">IL</span> 
    <span class="postal-code">60613</span></p>
</body>
	

<body class="vcard">
<h1><a class="url fn n" href="http://janeexample.com/">
  <span class="honorific-prefix">Dr.</span>
  <span class="given-name">Jane</span>
  <span class="family-name">Example</span>
  </a>
</h1>   
<p>I am an <span class="title">Assistant Professor of Rhetoric and Composition</span>
  at <a class="url org" href="http://www.beispiel.edu/">Beispiel University</a>. 
  My interests are in writing program administration, first-year writing, and classical
  rhetoric. You can email me at <span class="email">jane@janeexample.com</span>, or 
  reach me by postal mail at:</p>
<p class="adr">
  <span class="extended-address">Random Hall 321</span><br />
  <span class="street-address">1060 West Addison</span><br />
  <span class="locality">Chicago</span>, 
    <span class="region" title="Illinois">IL</span> 
    <span class="postal-code">60613</span></p>
</body>

Again, because this is only a structural modification (albeit a dramatic one), Dr. Example will see no visible difference in the rendering of her page:

Pedagogical Value of Microformats

There are numerous pedagogical values of microformats; to realize these benefits (like those of any digital production technology) requires an instructor to dedicate herself to an ongoing development of her own digital production literacy.

• Introduce students to POSH (Plain Old Semantic HTML)
• Contribute to student’s source literacy (X/HTML, CSS), while establishing the limitations of WYSIWYG editors
• Familiarize students with open standards and their documentation/specifications
• Raise awareness of standards-compliant browsers (Firefox, Safari, Opera)
• Demonstrate relationships between document structure and presentation
• Provide a living example of mass, distributed collaboration on the Web (microformats.org community; attitudes of authors using microformats)

Microformats versus IE8’s “Activities”

Microformats are not to be confused with Internet Explorer 8’s “Activities” (at least in their beta form); microformats are composed by web authors as part of a document’s structure, and a microformat-aware environment (e.g., Firefox w/ the Operator add-on) will enable user actions based on microformats automatically (versus “Activities’s” reliance on user-selected text). In theory, microformats could be useful apart from a human agent; for example, if your address book notes the URL containing the hCard source of a given address book entry, the address book itself might query that URL from time to time (similar to the behavior of an RSS reader) to see if the contact information has changed, and silently update changes as they occur.

Presented at CCCC Computer Connections 2008, New Orleans, LA.