Chapter 2. Defining Outlines: XOXO
What Is XOXO?
Since we are just getting started, I thought it would make sense to begin with one of the simplest microformats. You know, ease into things. So, here we go with XOXO.
Nope, it’s not about kisses and hugs (although my grandmother would’ve disagreed). XOXO stands for Extensible Open XHTML Outlines, and it is the microformat applied to outline content on the web.
What is considered outline content? Basically, it’s content that would be contained by XHTML list elements, such as actual outlines, blogrolls, site maps, even presentations.
What’s the point?
Other than adding semantic value, using XOXO with outline content allows machines (remember, those are computers, user agents, applications, and so on, not The Terminator) to extract outline content from the page and transform it into XML, JSON, RSS, or whatever data structure you desire.
Let’s say, for example, you have a site map marked up using nested lists. If you use the XOXO microformat on this site map, you allow a simple program (which doesn’t have to be customized for your page) to extract that content and convert it into a Google Sitemap. Google Sitemaps, as you probably know, can help the search engine crawl your site more intelligently, which may help with SEO.
Profile
Like most of the microformat specifications, XOXO has its own profile. You reference its profile in your <head> element:
<head profile="http://microformats.org/profile/xoxo">
And for clarity’s sake, profiles are not required, only recommended.
Basic syntax
The syntax for XOXO is ridiculously simple. You just add the required root property xoxo to a list, such as in this example of a linkroll (Figure 2.1):
Figure 2.1 Unstyled browser view of a simple linkroll using XOXO.
That’s it.
XOXO is one of the few microformats that does require specific markup. As I mentioned, the class="xoxo" is applied to either a <ul> or <ol> list element. Pick the one that is most semantically appropriate for your content.
Once you’ve decided on the appropriate list element, you’ll need to keep a few things in mind in terms of the structure of your list content:
• The <ul> or <ol> is the container for your outline items. It is the root element of your outline and must be assigned class="xoxo".
• The <li>s within your list contain the outline content, which can be a single bit of text, a paragraph, or even nested lists. In the case of nested lists, you can use <ol>, <ul>, or <dl>.
• The only element of a <ul> or an <ol> that can be a child is an <li>. So if you are nesting markup, nest inside the <li>s, not the <ul> or <ol>.
And them’s the basics.
Detailed content? Detailed markup.
Of course, if you want to get into further detail with your content structure and metadata, you can. It just isn’t required for XOXO.
If your outline content contains in-depth information (opposed to brief text descriptions), be sure to mark up that content semantically. Remember, <li>s can contain most elements, so if you have headline content, use the appropriate element (<h1>–<h6>). If you have paragraph content, use <p>. If you have more list content, use <ul>, <ol>, or <dl>.
Or when URLs are included for an item in your outline, the <a> can be assigned attributes to provide further detail:
• title attribute, to give further descriptive detail about the link
• type attribute, to indicate the MIME (Multipurpose Internet Mail Extensions) type of the href destination
• rel attribute, to indicate (via XFN) the relationship of the href destination to your outline
• rev attribute, to indicate the relationship of your outline to the href destination
These are just extras, though, not required attributes for the links in your outline. But if you have the information, why not add it? The more detail, the more power your content has.
For even more content power (I’m starting to sound like a dish detergent ad), if it makes sense to apply another microformat to any of that content, do it.
If you have contact information, use hCard. For event information, hCalendar. And so on. Of course, we have yet to cover those microformats in detail, but keep in mind that combining microformats where appropriate is, as Martha Stewart would say, “a good thing.”
Practical markup
So now you know the basic syntax for XOXO, and you know all about XHTML list elements. Let’s put all of this into action with some practical examples.
S5 presentation using <ol>
I mentioned earlier that outline content can be a presentation. In fact, renowned CSS guru Eric Meyer developed a web-based presentation system that uses XOXO: S5 (Simple Standards-Based Slide Show System).
S5 was developed so that, with a single XHTML page, you can have a web-based slide show along with a printer-friendly version. Not to mention, all of the content in S5 is accessible to search engines for lots of SEO goodness.
I’ve used S5 for many of my own presentations. Here’s an excerpt:
As you can see, it is just a list containing detailed content that I’ve marked up to reflect the proper semantic structure.
Required root property: xoxo
To implement XOXO on this slideshow is really quite simple. I just apply class="xoxo" to the <ol>, and all of my displayed slide content is contained within each <li>.
<ol class="presentation xoxo">
All the other classes you see applied to the various elements just support the CSS and JavaScript that enable the slideshow to display and function as intended (Figure 2.2). So while these aren’t necessary for XOXO, they do illustrate that you can style microformats any way your heart desires.
Figure 2.2 Styled browser view, using the core S5 CSS, of three presentation “slides.”
And to illustrate the power of CSS and POSH, here is the unstyled view of the presentation in a single web page that contains all of the content, completely accessible to all devices, search engines, and users (Figure 2.3).
Figure 2.3 Unstyled browser view of the S5 presentation using an ordered list with XOXO.
The logic behind the markup
Now, as I promised in Chapter 1, we’ll discuss the logic behind the markup in each example. Here goes.
You will note that the S5 markup utilizes an <ol> as its root element. That is because the slides have a sequential order to them: slide one, slide two, slide three, . . . you get the picture.
Because there is a sequence to the slides that is important to the content, an <ol> is the correct list element to use. Even better, because <li>s can contain most block-level elements, using an <ol> doesn’t restrict what type of content the <li>s can contain.
Of course, this presentation could’ve also used a series of <div>s rather than an <ol>. In fact, there is a non-XOXO S5 version. But personally, I feel the <ol> is more semantic because of its inherent sequential nature. Not to mention, XOXO only works with the <ol>-based version.
Site map using nested <ul>s
I also referenced a site map as an example of outline content. So let’s see how that would look with XOXO, using a simple site map for a fictional company that sells widgets and sprockets.
Required root property: xoxo
Once again, to apply XOXO to this site map, I add class="xoxo" to my root <ul>:
<ul class="xoxo">
As with the S5 markup example, the only things essential for XOXO are a list element assigned class="xoxo", and nested lists properly contained by <li>s.
Are you starting to see how simple XOXO is? Good. That’s what I want to hear.
The logic behind the markup
For a site map, at least how I see it, there isn’t an inherent sequential order to the content. It is just a list of links to pages on a site. As such, a <ul> makes the most semantic sense to me. There is a hierarchy, though, which is why this example uses nested lists to give the content a structure suggesting sections and subsections (Figure 2.4).
Figure 2.4 Unstyled browser view of a simple site map using nested ordered lists with XOXO.
Table of contents using nested <ol>s
Another possible type of outline content may be a table of contents for a lengthy online article to help users navigate to specific content. I’ve been guilty of verbosity with some of my microformats blog posts, and in retrospect, a table of contents might have been useful. Here’s how I’d do it now:
Required root property: xoxo
Let me say it one more time: all you need to do to your POSHified content to utilize XOXO is add class="xoxo":
<ol class="xoxo">
The logic behind the markup
For this table of contents, I used the same concept as that of the site map, but with nested <ol>s. Why ordered lists? Because tables of content are, by nature, sequential, so the <ol> gives me that sequential meaning through the structure of the element (Figure 2.5).
Figure 2.5 Unstyled browser view of a simple table of contents using nested ordered lists with XOXO.
You did it!
And that concludes our first look at a microformat. I told you it was easy.
Next up, we’re going to take a look at the rel- and rev-based microformats, which give semantic meaning about the relationship of links to their destination hrefs.