Lists! They might seem boring, but if you look at a lot of site source code (good sites at least,) you’ll see a lot of lists. A lot of obvious content on the net is in the form of lists (which is why there are three separate constructions for them) and a few years ago we started using them for less-obvious, but still valid reasons.

Using Lists as Menus

The biggest, non-obvious, use of lists is for menus. Someone, somewhere, pointed out that menus were just lists of links. Couple that insight with the power of CSS to bend boring old lists to the designer/developer’s will and we had a de-facto standard on our hands.

Here’s what the menu system for DrunkenFist.com looks like. It’s a lot of code, but it’s a fully-realized version of the pattern, so it’s useful to look at in whole. As a note, this is an HTML5 site, so the nav element is in place signifying to browsers that “the following block represents site navigation.” I’ll be covering the new HTML5 elements as the very last post on the body.

<nav id="site-navigation">

  <ul class="menu">
    
    <li class="primary"><a href="/art.php">Art</a>
      
      <ul class="secondary" id="art-secondary">
        
        <li id="graffiti-menu"><a href="/art/graffiti-art/index.php">Graffiti</a>

          <ul class="tertiary">

            <li><a href="/art/graffiti-art/canvases/index.php">Canvases</a></li>

            <li><a href="/art/graffiti-art/walls/index.php">Walls</a></li>

            <li><a href="/art/graffiti-art/black-book/index.php">Blackbook</a></li>

            <li><a href="/art/graffiti-art/digital/index.php">Digital</a></li>

            <li><a href="/art/graffiti-art/alphabet/index.php">Alphabet</a></li>

            <li><a href="/art/graffiti-art/commissions.php">Commissions</a></li>

          </ul>

        </li>

        <li id="comics-menu"><a href="/art/comic-books/index.php">Comics</a>

          <ul class="tertiary">

            <li><a href="/art/comic-books/inking/index.php">Inking</a></li>

            <li><a href="/art/comic-books/pinups/index.php">Pinups</a></li>

            <li><a href="/art/comic-books/web-comics/index.php">Web Comics</a></li>

          </ul>

        </li>

        <li><a href="/art/color/index.php">Color</a></li>

        <li><a href="/art/black-and-white/index.php">Black and White</a> </li>

        <li><a href="/art/pencil/index.php">Pencil</a></li>

      </ul>

    </li>

    <li class="primary"><a href="/304/">Blog</a>

      <ul class="secondary" id="blog-secondary">

        <li id="blog-menu">Categories

          <ul class="tertiary">

            <li><a title="View all posts filed under art" href="/304/category/culture/art/">art</a> </li>

            <li><a title="View all posts filed under books" href="/304/category/culture/books/">books</a> </li>

            <li><a title="View all posts filed under cycling" href="/304/category/sport/cycling/">cycling</a></li>

            <li><a title="View all posts filed under friends" href="/304/category/friends/">friends</a></li>

            <li><a title="View all posts filed under graffiti" href="/304/category/culture/graffiti/">graffiti</a> </li>

            <li><a title="View all posts filed under movies" href="/304/category/culture/movies/">movies</a> </li>

            <li><a title="View all posts filed under music" href="/304/category/culture/music/">music</a> </li>

            <li><a title="View all posts filed under science" href="/304/category/science/">science</a> </li>

            <li><a title="View all posts filed under sketch" href="/304/category/sketch/">sketch</a> </li>

            <li><a title="View all posts filed under sport" href="/304/category/sport/">sport</a> </li>

          </ul>

        </li>

      </ul>

    </li>

    <li class="primary"><a href="/movies.php">Movies</a>

	  <ul class="secondary" id="movies-secondary">

        <li><a href="/movies/hong-kong/">Hong Kong</a></li>

        <li><a href="/movies/hollywood/">Hollywood</a></li>

        <li><a href="/movies/japan/">Japanese</a></li>

        <li><a href="/movies/indy-foreign/">Indy/Foreign</a></li>

        <li> <a href="/movies/index.php">Index</a></li>

      </ul>

    </li>

    <li class="primary"><a href="/about.php">About</a></li>

  </ul>

</nav>

Clicking through you can see the default behavior and style. It’s very easy to style and code a menu like that- assuming you’re ignoring IE6 (which I am.) It’s pure HTML + CSS. That’s a good thing. I love JavaScript, but if I don’t need to use it I won’t. I’m a firm believer of that idea that, no matter the application, on the web, less code = better.

Another nice thing about lists as menus is what the same code looks like without CSS. It captures the hierarchy with or without styles (which is a reasonable indication that it will also make sense in a screen reader.) Another reason to like this pattern. Click through for the larger version.

Lists as Lists

Beyond the use of lists-as-menus, learning to recognize the right ways to use lists for content is a handy skill to have. Using the right markup and having nice clean styles available for that markup is one of the keys to publishing quality content. If it looks good, is scannable and can be parsed by search engines, you’re a long way along the road to getting the web right. Using the right markup for the job helps.

As an aside, getting the words themselves right is a bit trickier, but it wouldn’t be any fun if it were all as easy as 1-2-3.

The general rule of thumb is- if it feels like a list, make it a list. Which type of list is broken down as follows.

Unordered Lists

The spec says:
“The Unordered List ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.”

For a specification, that’s actually pretty clear. If it’s a list of stuff, and the order doesn’t matter, use an unordered list. Each List Item, is contained in an LI element.

Ordered List

The spec says:
“The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.”

Simple enough, I think. Marking up a list of the all-time-record comic book sales? Use an ordered list.

<ol>

  <li>Action Comics #1 CGC 8.5 $1,500,000 </li>

  <li>Detective Comics #27 CGC 8.0 1,075,000</a> </li>

  <li>Action Comics #1 CGC 8.0 Kansas City Pedigree $1,000,000 </li>

  <li>Flash Comics #1 CGC 9.6 Mile High/Edgar Church Pedigree $450,000</li>

  <li>Marvel Comics #1 CGC 9.0 Pay Copy $350,000 </li>

  <li>Flash Comics #1 CGC 9.6 Mile High/Edgar Church Pedigree $350,000 </li>

  <li>Action Comics #1 CGC 6.0 $317,200</li>

  <li>Batman #1 CGC 9.0 $280,000</li>

  <li>Detective Comics #27 CGC 8.0 $278,190 </li>

  <li>Flash Comics #1 CGC 9.6 Mile High/Edgar Church Pedigree $273,125</li>

</ol>

That code results in Order:

1. Action Comics #1 CGC 8.5 $1,500,000
2. Detective Comics #27 CGC 8.0 1,075,000
3. Action Comics #1 CGC 8.0 Kansas City Pedigree $1,000,000
4. Flash Comics #1 CGC 9.6 Edgar Church Pedigree $450,000
5. Marvel Comics #1 CGC 9.0 Pay Copy $350,000
6. Flash Comics #1 CGC 9.6 Edgar Church Pedigree $350,000
7. Action Comics #1 CGC 6.0 $317,200
8. Batman #1 CGC 9.0 $280,000
9. Detective Comics #27 CGC 8.0 $278,190
10. Flash Comics #1 CGC 9.6 Edgar Church Pedigree $273,125

Definition Lists

Definition lists are a little more complicated. The spec says:

The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements). Within a single dl element, there should not be more than one dt element for each name.

Name-value groups may be terms and definitions, metadata topics and values, or any other groups of name-value data.

The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.

The most important thing to note is the lack of familiar LI elements and the inclusion of two new child elements- the Term (the DT element) and the Definition (as a DD element). They’re grouped as a set of Name/Value pairs (although multiple Definitions are allowed.)

The clearest use-case for the DL is a glossary of terms. I like to stretch the use of them a little bit and will commonly use the construction for things like FAQs (a DD can contained block level elements like H*s, Ps and ULs, so you can fill it with real content) and, on the home page of DrunkenFist.com, a list of calendar dates and associated site updates. I like the connection that the DL–DD pair gives to content like this:

<section class="home-listing">
  <h2>Blog Headlines</h2>        
  <h3>No Mod Required</h3>
  <dl>
    <dt>2010-3-28:</dt> 
    <dd><a href="http://www.drunkenfist.com/304/2010/03/28/why-oh-no-reason/" title="">Why? Oh, No Reason.</a></dd>
    <dt>2010-3-26:</dt> 
    <dd><a href="http://www.drunkenfist.com/304/2010/03/26/boks-2010-2-shutter-island/" title="All of the Dennis Lehane books I've read have been...">Boks 2010 #2 Shutter Island</a></dd>
    <dt>2010-3-26:</dt> 
    <dd><a href="http://www.drunkenfist.com/304/2010/03/26/happy-friday-2/" title="I haven't posed a drawing of any sort here for far...">Happy Friday</a></dd>
    <dt>2010-3-25:</dt> 
    <dd><a href="http://www.drunkenfist.com/304/2010/03/25/movies-2010-7-the-last-station/" title="How far behind am I on movie reviews? I saw The La...">Movies 2010 #7 The Last Station</a></dd>
  </dl>
</section>

There are plenty of other possible uses of the DL. It’s a nice construction to have hanging around.

Thus concludes another tour through some standard HTML elements. More next time! We’ve still got a ways to go before we’re clear of the body. It’s where most of the magic happens so I want to make sure I’m doing it justice.