Using Microformats

Microformats are an interesting new development in the use of XHTML. Rather than propose new XML grammars for items such as contacts, lists, or calendar elements, microformat users recommend using standard XHTML tags, with CSS for formatting for those elements. Among many benefits of this technique are the following:

• q You don't need to learn a new XML grammar or to get a standards body to approve it.

• q No additional code is required to display microformats in existing browsers and applications.

• q Existing XHTML validators can validate the pages produced using microformats by using existing XHTML tags.

• q The microformat is human-readable, and at the same time it provides information to software, such as search engines.

There are three basic sets of microformats-simple, elemental microformats, and compound microformats.

Elemental Microformats

Elemental microformats are minimal solutions to a specific XHTML problem (often a single element or an attribute). They provide additional semantic information to the content of the XHTML page. Some of the more notable elemental microformats include:

• q RelNoFollow: An attribute used to change the way search engines treatlinking tags.

• q Rel-Tag: An attribute used to identify the topic of a link, page, or other item.

RelNoFollow

The most-used elemental microformat is the RelNoFollow microformat. This microformat recommends the addition of the attribute rel=“nofollow” to some hyperlinks, typically in the comment section of a weblog or forum. The end user does not see the effect of this change in the hyperlink, but it becomes an informational marker for search engines. Typically, search engines follow hyperlinks and apply weighting to the association between the destination page and the linking page. Therefore, if the link is coming from a popular site about some technology, the target page may likely be about that technology as well. However, this relationship has been used by a number of spam groups to increase their status in popular search engines, typically by commenting on popular blogs or news sites. The RelNoFollow microformat is a marker for search engines to ignore the target page, reducing the value of such comment spam. You can get more information on the RelNoFollow microformat at http://www.microformats.org/wiki/relnofollow.

Rel-Tag

Rel-Tag is intended to be metadata added to an article, blog post, or other block of information, that provides the topic of the item. The intent is that the tag points to an aggregation of similar items, a definition of the item, or similar collection. For example, Rel-Tag could be used in a weblog post or article to identify that the content involves XHTML by adding the following tag to the content.

      <a rel="xhtml" href="http://www.technorati.com/tag/xhtml">XHTML</a> 

An application reading this would realize (because of the rel="xhtml" attribute) that the post was about XHTML. Users then click on the link to discover more links about XHTML. Note that the link doesn't have to point to Technorati, but it could instead point at some other tag aggregation site, such as Delicious (e.g. http://www.del.icio.us/tag/xhtml), Wikipedia (for example, http://www.en.wikipedia.org/wiki/Xhtml), or even the specification itself (for example, http://www.w3.org/TR/xhtml11/). Rel-Tag suggests the presence of the rel=“xhtml” attribute, and requires href to point to something useful and appropriate for that attribute.

In one sense, Rel-Tags are similar to the META tags that some people add to the head section of XHTML pages. However, they are slightly different in that they are visible. Their visibility makes them a more honest attempt at identifying the content. In the past, many sites have abused META tags by adding them excessively or falsely, in the hope that search engines would misidentify the site as highly relevant to a search subject. For this reason, many of the major search engines have stopped using META tags completely. By adding Rel-Tags to appropriate links on your XHTML pages, you provide this metadata, but in a way that is less prone to abuse. You can get more information on Rel-Tag at http://www.microformats.org/wiki/reltag.

Compound Microformats

Compound microformats are XHTML versions of other formats, built using XHTML elements and elemental microformats. The intent is to embed them in XHTML pages. They provide information to both users and applications viewing the page. Three of the most significant compound microformats include:

• q hCard: An XHTML representation of the vCard standard for contact information.

• q hCalendar: An XHTML representation of the iCalendar standard for calendaring and events information.

• q hReview: An XHTML representation for review (as in movie, book, or music reviews) information.

hCard

hCard is a proposed structure for contact information in XHTML, based on the vCard format. Although vCard is text-based, it is not XML. hCard is a combination of recommended structure and class names. The class names provide hooks to provide for additional styling, as well as metadata about the content. Listing 3-13 shows a sample hCard block.

Listing 3-13: hCard

      <div >        <a  href="http://www.example.com">        <span >John</span>        <span >J.</span> <span >Bull</span></a>        <div >Example Corp.</div>        <div >          <div >123 Any Drive</div>          <span >Springfield</span>,          <span >KY</span>          <span >40069</span>        </div>        <div >[phone]</div>        <a  href="http://blog.johnjbull.com">Home Page</a>        <a  href="mailto:[e-mail]">Contact</a>      </div> 

The hCard information is wrapped in a div with an attribute of vcard. Within the hCard, the individual elements of the contact item are created in a mixture of div, span, and a tags. The class of these tags clarifies the information's true meaning. The applications processing this block of XHTML can process the data. Humans looking at this block without any style information can still read it (see Figure 3-11). Addition of a simple style sheet can greatly alter the view for humans (see Figure 3-12), without changing the data available for applications processing the hCard.

Figure 3-11

Figure 3-12

hCalendar

hCalendar is a proposed structure for date and event information using XHTML. It is based on the iCalendar standard of the IETF made popular by Apple with their iCal product. It is an excellent way of including event information within XML that is not directly associated with a specific calendaring application. Listing 3-14 shows an example of hCalendar.

Listing 3-14: hCalendar

      <div >        <abbr  title="20060104T0900-0800">          January 4, 2006 - 09:00        </abbr> -        <abbr  title="20060104T1500-0800">          15:00          </abbr>        -   <span >            Meeting Planning Meeting          </span> - at         <span >            Room 13          </span>          <div >             We need to use this time to plan an upcoming meeting.        Lunch will not be provided.           </div>      </div> 

The entire calendar item is wrapped in a div tag, with a class of vevent. Within the div, spans, and additional divs provide the information. The most notable aspect of the hCalendar format is how dates are written. The abbr tag is used to identify the start and end dates (and times) of the event. The title attribute of the element contains the ISO 8601 version of the date and time (in the previous example, January 4, 2006, 9:00 am in the US Pacific time zone), whereas the content is a more user-friendly rendering of the date and time. This provides useful information to any application processing the hCalendar data, without forcing users to employ that format.

Note 

Internet Explorer (version 6.0 and below) does not have support for the abbr element. Or rather, it supports it, but does nothing with it. Other browsers, such as Netscape, Firefox, and Opera render the tag with a dotted underline (as seen in Figure 3-13). Safari behaves intermediately-the tooltip works, but the text is not rendered with the dotted underline.

Figure 3-13

hReview

hReview is a proposed structure for product reviews on Web pages. It is a combination of a recommended structure, along with recommended class names. A simple hReview block looks like the code in Listing 3-15 (from the specification).

Listing 3-15: hReview

      <div >       <span><span >5</span> out of 5 stars</span>       <h4 ><span >Crepes on Cole</span> is awesome</h4>       <span>Reviewer: <span >Tantek</span> -       <abbr  title="20050418T2300-0700">April 18, 2005</abbr></span>       <blockquote ><p>        Crepes on Cole is one of the best little creperies in San Francisco.        Excellent food and service. Plenty of tables in a variety of sizes        for parties large and small.  Window seating makes for excellent        people watching to/from the N-Judah which stops right outside.        I've had many fun social gatherings here, as well as gotten        plenty of work done thanks to neighborhood WiFi.       </p></blockquote>       <p>Visit date: <span>April 2005</span></p>       <p>Food eaten: <span>Florentine crepe</span></p>      </div> 

The entire hReview is enclosed in a div tag, with a class of hreview. In addition, appropriate span tags are identified in the block with the addition of class attributes. The review itself is enclosed in a block-quote tag with a class of description. Finally, the date and time of the review are included using an abbreviation (abbr) tag that includes the date and time in ISO 8601 format (year month day T time timezone). For example, May 4, 2006 at 3:02 AM in the Pacific Time Zone would be written as 20060504T0302-700. Even without an added stylesheet, this is perfectly readable (see Figure 3-14). In addition, applications can extract useful information from the page, including the reviewer, the item reviewed, the rating, and the text of the review. You can get more information about hReview at http://www.microformats.org/wiki/hreview.

Figure 3-14