rel-license (http://microformats.org/wiki/rel-license) is for specifying a license to be associated with the embedding page. For instance, when you go to the Creative Commons site (http://creativecommons.org/license) to select a license, you will be given some HTML that uses the rel-license microformat to indicate a license. For instance, if you select the defaults, you will get something like this:^[312]

            <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
            <img alt="Creative Commons License" style="border-width:0"
                 src="http://i.creativecommons.org/l/by/3.0/88x31.png" />
            </a>
            <br />This work is licensed under a
            <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
            Creative Commons Attribution 3.0 License</a>.
         

As noted, rel-license uses rel-design-pattern (that is, it uses the rel attribute in an <a> element).

The rel-tag microformat (http://microformats.org/wiki/rel-tag) is used to relate a tag (as in a folksonomic tag; see Chapter 4) to a URL. You use it by implementing rel-design-pattern, specifically, by adding tag to the list of values in the rel attribute. The last path segment of the URL in the href attribute is then considered the value of the tag, and the URL value of href points to a collection of items having the same tag.

Consider the following example generated by WordPress for the Google Maps category for http://blog.mashupguide.net:

            <a rel="tag" title="View all posts in Google Maps"
               href="http://blog.mashupguide.net/category/google-maps/">Google Maps</a>
         

In this case, google-maps is the tag (the last path segment of the URL in the href attribute), and http://blog.mashupguide.net/category/google-maps/ points to the blog entries that have been tagged with the tag google-maps.

xfn (http://www.gmpg.org/xfn/), which stands for XHTML Friends Network and also uses rel- de sign-pattern, is used to denote personal relationships between the author of a web page and the people associated with the linked page. The easiest way is to get started is to fill out the XFN Creator (http://gmpg.org/xfn/creator).

I’ll now present two examples. The first is for my wife’s weblog:

            <a href="http://laurashefler.net/blog"
               rel="friend met colleague coresident spouse muse sweetheart">Laura Shefler</a>
         

The second is for Tim ­Berners-­Lee’s web page. In this case, he is a contact since I don’t know him personally:

<a href="http://www.w3.org/People/Berners-Lee/" rel="contact">Tim ?Berners-?Lee</a>

xFolk (http://microformats.org/wiki/xfolk) is used to publish a bookmark (like the bookmarks you see in social bookmarking sites, covered in Chapter 14). That is, you can use xFolk to tie a URL to a description and tags. (I imagine that the name xFolk is meant to suggest folksonomies since you can use it to tag URLs.)

xFolk uses class-design-pattern (with class="xfolkentry"). In the following example, the URL of the bookmark is http://www.w3.org/People/Berners-Lee, the description is The inventor of the WWW, and the tag associated with the bookmark is WWW:

            <div class="xfolkentry">
              <a class="taggedlink" href="http://www.w3.org/People/Berners-Lee/">Tim ?Berners-?Lee
              </a>: <span class="description">The inventor of the WWW</span>
              <a rel="tag" href="http://technorati.com/tag/WWW"></a>
            </div>
         

Note the use of the xfolkentry, taggedlink, and description class names.

With Operator, you can try the “Bookmark with del.icio.us” action, which sends the bookmark to del.icio.us through the following URL:

            https://secure.del.icio.us/login?url=http%3A%2F%2Fwww.w3.org%2FPeople%2FBerners-Lee%Â
            2F&title=Tim%20Berners-Lee&notes=The%20inventer%20of%20the%20WWW&v=4
         

geo (http://microformats.org/wiki/geo) is used to denote the latitude and longitude of the resource tied to the embedding web page. Using http://microformats.org/wiki/geo-cheatsheet, you can figure out how to use class-design-pattern and use the geo, latitude, and longitude class names to write an example such as the following:

            <div class="geo">Tim ?Berners-?Lee's location is:
              <span class="latitude">42.3633690</span>,
              <span class="longitude">-71.091796</span>.
            </div>
         

Given all the attention we paid to mapping geotagged photos in Flickr, I should mention that Flickr uses the geo microformat to denote the location of geotagged photos. For instance, if you load this:

http://flickr.com/photos/raymondyee/18389540/

into Firefox, you can use Operator to extract the geo instance:

            <span class="geo" style="display: none">
              <span class="latitude">37.4149</span>,
              <span class="longitude">-122.078</span>
            </span>
         

Then you can invoke one of the default actions (for example, Find with Google Maps) to plot the location of the photo at this location:

http://maps.google.com/maps?ll=37.8721,-122.257704&q=37.8721,-122.257704

hCard (http://microformats.org/wiki/hcard) is used to represent such entities as people, organizations, companies, and places. An easy way to get started with hCard is to use the hCard Creator at http://microformats.org/code/hcard/creator.

Let’s create an hCard for Tim ­Berners-­Lee, the inventor of the Web, drawing on his web page at http://www.w3.org/People/Berners-Lee/ to come up with the following:

            <div id="hcard-Tim-Berners-Lee" class="vcard">
              <a class="url fn" href="http://www.w3.org/People/Berners-Lee/">Tim ?Berners-?Lee</a>
              <div class="org">World Wide Web Consortium</div>
              <a class="email" href="mailto:timbl@w3.org">timbl@w3.org</a>
              <div class="adr">
                <div class="street-address">77 Massachusetts Ave. (MIT Room 32-G524)</div>
                <span class="locality">Cambridge</span>
            ,
                <span class="region">MA</span>
            ,
                <span class="postal-code">02139</span>
            
                <span class="country-name">USA</span>
            
              </div>
              <div class="tel">+1 (617) 253 5702</div>
              <p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">
            hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">
            hCard creator</a>.
              </p>
            </div>
         

You’ll notice that inside the hCard microformat is the adr microformat (http://? microformats.org/wiki/adr). adr is a mapping of vCard:

There is support in adr for the following properties, which show up in adr as (X)HTML attributes according to class-design-pattern:

hCalendar (http://microformats.org/wiki/hcalendar) is a ­microformat-­based iCalendar used to represent calendar information. To quickly create an instance, use the hCalendar Creator (h ttp://microformats.org/code/hcalendar/creator), or consult the hCalendar cheat sheet (http://microformats.org/wiki/hcalendar-cheatsheet). Let’s create an hCalendar for the WWW 2008 conference (http://www2008.org/):

            <div class="vevent"
                 id="hcalendar-WWW-2008-17th-International-World-Wide-Web-Conference">
              <a class="url" href="http://www2008.org/">
                <abbr class="dtstart" title="20080421">April 21th</abbr> &mdash;
                <abbr class="dtend" title="20080426">25th, 2008</abbr>
                <span class="summary">
                  WWW 2008 (17th International World Wide Web Conference)
                </span>&mdash; at
                <span class="location">Beijing International Convention Center, </span>
              </a>
              <div class="description">"The World Wide Web Conference is a global event bringing
            together key researchers, innovators, ?decision-?makers, technologists, businesses,
            and standards bodies working to shape the Web. Since its inception in 1994, the WWW
            conference has become the annual venue for international discussions and debate on
            the future evolution of the Web."</div>
              <p style="font-size: smaller;">This
                <a href="http://microformats.org/wiki/hcalendar">hCalendar event</a>
            brought to you by the
                <a href="http://microformats.org/code/hcalendar/creator">hCalendar Creator</a>.
              </p>
            </div>
         

Here are some other noteworthy microformats: