Chapter 5. Defining Bookmarks: xFolk
In Chapter 3, I covered the use of rel-tag for defining links that indicate what a web page—or part of the web page—is about. I also mentioned this is commonly used for tagging articles and blog posts, providing links to keywords, or tags, that tell what the content is about.
This concept of tagging can be extended beyond links, to keywords for an article or a blog post. Tagging can also be used in bookmarking—that is, how users save and share links to web pages and sites.
Modern browsers support bookmarks. In Mozilla Firefox, Apple Safari (Figure 5.1), Opera, and Google Chrome, users can save links to favorite URLs via the Bookmarks menu, and they can tag these links with keywords.
Figure 5.1 The Bookmarks menu in the Apple Safari browser
In Microsoft Internet Explorer versions 6 through 8, you save links via the Favorites tool, although you cannot tag the bookmarks (Figure 5.2).
Figure 5.2 The Favorites tool in Microsoft Internet Explorer 7
This method of bookmarking, however, has limited use. The bookmarks are only available from the browser in which the links were saved.
Enter Social Bookmarking
Social bookmarking takes the notion of saving links beyond the browser by allowing users to save (and share) bookmarks using web-based services such as Delicious, Digg, Diigo, Newsvine, Reddit, StumbleUpon, and many others.
With these services, users can do much more than just save and share bookmarks, however. Social bookmarking services let users manage, organize, and search their saved links, primarily by assigning metadata like tags.
In social bookmarking parlance, tagging is assigning keywords to saved links (much like what the tagging feature does for bookmarks in browsers other than IE). But with social tagging, the keywords can be aggregated from keywords that other users of the service have used.
This collaborative/collective tagging creates what has been termed a folksonomy that ultimately categorizes the content according to these tags, thus making it easier to search, share, and organize.
It is this notion of a folksonomy that is the focus of our next microformat: xFolk, from xFolksonomy.
What Is xFolk?
xFolk is a draft microformat that is used for adding semantic value and structure to published bookmark collections.
xFolk is the first compound microformat we are covering (remember, compounds have properties and subproperties, as opposed to a single attribute-value pair in elementals), and it incorporates the rel-tag micro-format we discussed in Chapter 2.
And the benefits?
xFolk provides an open standard for bookmarking that offers two primary benefits:
1. The aforementioned social bookmarking services can offer data in a format that is easily manipulated by third-party applications (machines!).
2. Users aren’t restricted to social bookmarking services for their shared links.
By implementing xFolk, social bookmarking services extend functionality beyond the basic service, enabling their data to be extracted and rearranged for use in other services like search engines.
But the even greater benefit (at least as I see it) of xFolk is decentralized tagging. Folks who don’t care to use a social bookmarking service, but who do care to publish collections of bookmarks, can utilize xFolk and automatically make their data extensible to machines.
And there are a couple of browser tools that expose xFolk on websites. Both the Operator (Figure 5.3) and Tails Export (Figure 5.4) add-ons for Firefox detect xFolk and let the user directly access bookmark links.
Figure 5.3 View of Operator identification of bookmarks
Figure 5.4 View of Tails Export identification of bookmarks
Profile
The profile for xFolk, as for all microformats, is recommended (not required). Since it is so easy, go ahead and drop it into your <head> element:
<head profile="http://microformats.org/profile/xfolk>
Syntax
Now let’s get into the meat of xFolk with a discussion of its syntax. As I mentioned, xFolk is the first compound microformat I’m covering. So let’s take a look at its properties:
• xfolkentry is the root property of xFolk. It is applied (as a value of the class attribute) to the element that contains all relevant xFolk content. And remember, root properties can’t be combined with any sub-properties.
• taggedentry is the property assigned to the link element (<a>) for the bookmark, again as a class attribute value. This property indicates the title or name of the bookmark. By default, the content contained by the link is used as the title. However, you can override the default and indicate the title of the bookmark via the link’s title attribute.
• description is the property assigned to the element (also as a class attribute value) that contains a summary or brief description of the bookmark.
• tag is the property assigned to tags (keywords) describing the link via the rel-tag microformat.
Of these four properties, only xfolkentry and taggedentry are required. The other two are optional.
Additionally, you can have an unlimited number of tags per entry, as well as multiple instances of description.
Practical Markup
Now, as with most microformats, the markup used is largely irrelevant as long as it is POSH. The exceptions are the elements for taggedentry and tag, which must be links.
Other than that, the markup is your call. Let’s take a look at some practical examples, starting with the most straightforward.
Simple bookmark list using <ul>
Like many bloggers, I import my Delicious feed into my blog so I can share my bookmarks with my readers:
As you can see, it is just an unordered list of links. No descriptions. No tags.
Now that we have some basic markup in place, let’s apply xFolk.
Required root property: xfolkentry
First, I add the xfolkentry property to each of my list items, because those <li>s contain my bookmark information.
<li class="xfolkentry"><a href="http://radar.oreilly.
com/2009/05/google-announces-support-for-m.html">Google
Announces Support for Microformats and RDFa - O'Reilly
Radar</a></li>
Note that I’m not applying the xfolkentry property to the containing <ul> element because my list has multiple bookmarks, each of which is contained by an <li>.
Required property: taggedentry
Next, I just add the taggedentry property to all of my bookmark links:
<li class="xfolkentry"><a href="http://radar.oreilly.
com/2009/05/google-announces-support-for-m.html"
class="taggedentry">Google Announces Support for
Microformats and RDFa O'Reilly Radar</a></li>
As I mentioned earlier, the content contained by my link element is, by default, the title or name of the bookmark.
<li class="xfolkentry"><a href="http://ajaxian.com/
archives/hixie-discusses-the-addition-of-html5-microdata"
class="taggedentry">Ajaxian » Hixie discusses the addition
of HTML5 "microdata"</a></li>
If I wanted to assign a different name or title, I would do that via the link’s title attribute:
<li class="xfolkentry"><a href="http://ajaxian.com/
archives/hixie-discusses-the-addition-of-html5-microdata"
class="taggedentry" title="HTML5 Microdata">Ajaxian » Hixie
discusses the addition of HTML5 "microdata"</a></li>
The end result
And that’s it. xFolk applied to a simple list of bookmarks. Now let’s get a bit more detailed with our content, adding descriptions and tags.
Bookmark list using nested <ul>s
In this next example, I use nested unordered lists for my bookmarks so that I can provide additional information. I’ve shortened my list to just two bookmarks. You know, save the trees and all.
So let’s take a gander at the markup before xFolk comes into the picture:
You can see that I’ve nested a <ul> in each of my bookmark <li>s. This nested unordered list contains items for the bookmark description and tags. Now for the xFolk.
Required properties: xfolkentry and taggedentry
I repeat the application of the xfolkentry property to my container <li> and taggedentry to the bookmark link, as I did in the previous example:
Optional property: description
Next I assign the optional description property to the nested <li>s containing my bookmark descriptions:
Optional: rel-tag
Lastly, I apply the rel-tag microformat to each of my tag links:
Regarding the use of rel-tag, be sure that the destination href of your tag link is a tag space. Remember, a tag space is a logical URL with the final segment being the actual tag content, as in my examples:
<a href="http://technorati.com/tag/google/" rel="tag">
Google</a>
The end result
And once again, that is it. Extremely simple.
The logic behind the markup
After looking at my example of nested unordered lists, you may be wondering why I didn’t use a definition list (<dl>). It is a good semantic element for content that has a term and definition, or for content where list items have a direct relationship with each other—both of which could apply to my bookmark list with descriptions and tags.
However, to use xFolk correctly, you need a container element for each xfolkentry. With a <dl>, the only element to which I could apply the root xfolkentry property is the containing <dl>.
This would necessitate a single <dl> for each bookmark (xfolkentry), which goes against the notion of a true list: there would be only one bookmark in each <dl>. To me, this is not semantic. Furthermore, xFolk is for a collection of bookmarks. So, I’m going with nested unordered lists.
xFolk in natural language
Based on my two examples, you may be assuming that your bookmarks need to be structured in some sort of list element. But you’d be wrong. Remember, when you assume, you make an ass out of u and me.
As I’ve said from the beginning, markup doesn’t matter with microformats (the exception being XOXO, which requires list elements, and the rel- and rev-based microformats, which are applied to links). If your markup is POSH (semantic and valid), then you are golden.
This means you can implement xFolk (and other microformats) in natural language—that is, language appearing in natural sentences, as opposed to chunking the content in list elements.
I could see taking this approach if you had a few bookmarks contained in the body of a blog post. So let’s do that.
Google recently announced that it is rolling out a new feature, Rich Snippets, which takes advantage of microformats and RDFa for reviews and contact information. Sounds like a perfect blog post in which I might include some useful bookmarks.
And since a blog post is mostly just a series of paragraphs, let’s drop xFolk into the natural language. Here’s the basic markup and content:
<p>I'm uber excited about <a href="http://technorati.com/
tag/google/">Google</a>'s latest support of <a href="http://
technorati.com/tag/microformats/">microformats</a> and
<a href="http://technorati.com/tag/rdfa/">RDFa</a>: <a
href=" http://radar.oreilly.com/2009/05/google-announces
-support-for-m.html">Rich Snippets</a>. This new feature
leverages both microformats and RDFa encoding to provide
more contextually rich search results.</p>
<p>To take advantage of Rich Snippets, <a href="http://
technorati.com/tag/google/">Google</a> has provided some
<a href="http://googlewebmastercentral.blogspot.com/2009/05/
introducing-rich-snippets.html">basic instructions</a>
for implementing <a href="http://technorati.com/tag/
microformats/">microformats</a> and <a href="http://
technorati.com/tag/rdfa/">RDFa</a>. With these simple markup
guidelines, content authors can take advantage of semantics
and the added search benefit of Rich Snippets.</p>
There’s the markup. Now let’s turn to xFolk, focusing on just one of the paragraphs in the above example.
Required root property: xfolkentry
First I apply the root xfolkentry to my containing paragraph element:
<p class="xfolkentry">I'm uber excited about <a
href="http://technorati.com/tag/google/">Google</a>'s
latest support of <a href="http://technorati.com/tag/
microformats/">microformats</a> and <a href="http://
technorati.com/tag/rdfa/">RDFa</a>: <a href=" http://
radar.oreilly.com/2009/05/google-announces-support-for-m.
html">Rich Snippets</a>. This new feature leverages both
microformats and RDFa encoding to provide more contextually
rich search results.</p>
Required property: taggedentry (with title)
Then I assign the required taggedentry property to my bookmark link. And because I’m using natural language, the content contained by my link isn’t the ideal title for the bookmark, so I’ll add that via the title attribute:
<p class="xfolkentry">I'm uber excited about <a
href="http://technorati.com/tag/google/">Google</a>'s
latest support of <a href="http://technorati.com/tag/
microformats/">microformats</a> and <a href="http://
technorati.com/tag/rdfa/">RDFa</a>: <a href=" http://radar.
oreilly.com/2009/05/google-announces-support-for-m.html"
class="taggedentry" title="Google Announces Support for
Microformats and RDFa">Rich Snippets</a>. This new feature
leverages both microformats and RDFa encoding to provide
more contextually rich search results.</p>
Optional property: description
My natural language includes a decent description for the bookmark within the paragraph already, so I just want to assign the optional description property to that content. However, I don’t currently have a containing element to which I can apply description. So I add a <span>.
Yes, I know. It’s not semantic, but I told you at the beginning, being a purist with your semantic markup isn’t always realistic. You need the <span> for a container, so just use it.
<p class="xfolkentry">I'm uber excited about <a href="http:
//technorati.com/tag/google/">Google</a>'s latest support
of <a href="http://technorati.com/tag/microformats/">
microformats</a> and <a href="http://technorati.com/tag/
rdfa/">RDFa</a>: <a href=" http://radar.oreilly.com/2009/05/
google-announces-support-for-m.html" class="taggedentry"
title="Google Announces Support for Microformats and
RDFa">Rich Snippets</a>. <span class="description">This new
feature leverages both microformats and RDFa encoding to
provide more contextually rich search results.</span></p>
Optional: rel-tag
Last, I assign rel-tag to the tag links I’ve included in my content. Remember, these are keywords describing the bookmark and the destination href is a tag space:
<p class="xfolkentry">I'm uber excited about <a
href="http://technorati.com/tag/google/" rel="tag">Google
</a>'s latest support of <a href="http://technorati.com/
tag/microformats/" rel="tag">microformats</a> and <a
href="http://technorati.com/tag/rdfa/">RDFa</a>: <a href="
http://radar.oreilly.com/2009/05/google-announces-support-
for-m.html" class="taggedentry" title="Google Announces
Support for Microformats and RDFa">Rich Snippets</a>.
<span class="description">This new feature leverages both
microformats and RDFa encoding to provide more contextually
rich search results.</span></p>
The end result
The steps applied to both paragraphs, each of which contains a bookmark, result in the following:
<p class="xfolkentry">I'm uber excited about <a href="http:
//technorati.com/tag/google/" rel="tag">Google</a>'s latest
support of <a href="http://technorati.com/tag/microformats/"
rel="tag">microformats</a> and <a href="http://technorati
.com/tag/rdfa/" rel="tag">RDFa</a>: <a href=" http://
radar.oreilly.com/2009/05/google-announces-support-
for-m.html" class="taggedentry" title="Google Announces
Support for Microformats and RDFa">Rich Snippets</a>.
<span class="description">This new feature leverages both
microformats and RDFa encoding to provide more contextually
rich search results.</span></p>
<p class="xfolkentry">To take advantage of Rich Snippets,
<a href="http://technorati.com/tag/google/" rel="tag">Google
</a> has provided some <a href="http://googlewebmaster
central.blogspot.com/2009/05/introducing-rich-snippets.
html" class="taggedentry" title="Google's instructions for
implementing Rich Snippets">basic instructions</a>
for implementing <a href="http://technorati.com/tag/
microformats/" rel="tag">microformats</a> and <a href="http:
//technorati.com/tag/rdfa/" rel="tag">RDFa</a>. <span
class="description">With these simple markup guidelines,
content authors can take advantage of semantics and the
added search benefit of Rich Snippets.</span></p>
Combining Microformats: xFolk and VoteLinks
I’ve talked about combining microformats several times already, and I’m going to talk about it again. Because it’s a good thing—where it makes contextual sense.
And since we are dealing with links in xFolk, combining it with VoteLinks makes sense. So let’s apply VoteLinks to my basic unordered list of bookmarks that already has xFolk applied:
Adding VoteLinks
As a reminder, because VoteLinks was covered way back in Chapter 3, this microformat indicates support, lack of support, or neutrality for a link destination via the rev attribute.
For most of the bookmarks in my example, I want to indicate support, so I would add rev="vote-for" to those link elements. However, there is one that I feel rather meh about, so that one will get rev="vote-abstain". And if I had any that I really didn’t want to support, I would assign rev="vote-against".
All that applied to my xFolk list of bookmarks results in this:
It’s your choice
Now, it is not required that you use these two microformats together. Neither depends on the other, and you may simply not see a need for xFolk and VoteLinks in reference to your own content.
But I believe it is important to know about potential use cases, so that’s why I’m telling you. Evaluate your content and needs, then decide on the appropriate implementation for you.
Which Brings Us to the End
So now you know your first compound microformat. Proud? I am. You are already becoming my favorite person.
And now you know the basics:
• You know about the elemental microformats, which are used alone and as building blocks for the compound microformats.
• You know about compound microformats, which have properties and subproperties.
• You know about combining microformats.
I feel confident in saying that you are well prepared to dive into more detailed microformats. So let’s do just that and take a look at hCard, which is used to describe people, places, and organizations.