What is the Best Way to Mark up a Numbered List of Items?

---

Let's say you have a list of instructions to mark up, with each item preceded by a number. We'll take a look at two different ways we might approach that, and why one may be more appropriate than the other.

Method A: Unordered Order

 <ul>   <li>1. Chop the onions.</li>   <li>2. Saute the onions for 3 minutes.</li>   <li>3. Add 3 cloves of garlic.</li>   <li>4. Cook for another 3 minutes.</li>   <li>5. Eat.</li> </ul> 

The preceding list could possibly be the worst recipe in culinary history, but it's there simply for the example's sake. It could use some salt or protein or . . . anyway, back to the important stuff.

For Method A we've chosen to mark the instructions up with an unordered list to take advantage of all the benefits that were outlined in Chapter 1. We've added structure and we know that most browsers, screen readers, and other devices can handle it properly. Later, we could style this list easily with CSS. Great! But . . .

The Numbers Game

Since this is a numbered list, we've added to the markup each number followed by a period to denote each separate step of the instructions. But what if we later needed to add a step in between steps 2 and 3? We'd need to renumber each step (by hand) that follows the one we've added. For this particular list, it's not such a big ordeal—but if you're dealing with a list of 100 items, you can start to see how tedious that could be.

Rendered Bullets

Because we're using an unordered list to structure the example, we're going to see bullets in front of each numbered item (as in Figure 8-1). You may like the bullets, and if not you could, of course, turn these off with CSS, but an unstyled view of this list would always reveal them.

Figure 8-1: Method A as viewed unstyled in a browser

There's an easier way—one that makes more semantic sense and is easier to maintain. Let's take a look at Method B.

Method B: An Ordered List

 <ol>   <li>Chop the onions.</li>   <li>Saute the onions for 3 minutes.</li>   <li>Add 3 cloves of garlic.</li>   <li>Cook for another 3 minutes.</li>   <li>Eat.</li> </ol> 

I'm sure this is the obvious choice for many—but that doesn't mean we all haven't used Method A at some point for one reason or another. The <ol> stands for "ordered list," so semantically we're using the right element for the task at hand here. What else makes Method B so special?

Automatic Numbering

You'll notice that we don't need to manually add a number to each list item. Numbers are generated automatically, in order, when using an <ol>. If our list of instructions was more like 100 steps, and we needed to later insert a new step right in the middle, we'd simply add another <li> item in the right position, and the renumbering would happen in the browser. Like magic.

With Method A, we'd need to manually change all those numbers we added to each item in the markup. I can certainly think of more enjoyable tasks to take care of.

Figure 8-2 shows how Method B would render in a typical browser, with the numbering preceding each instruction.

Figure 8-2: Method B as viewed in a browser

Wrapper's Delight II

Another advantage to using Method B is that when longer list items wrap to the next line, they are indented from the generated number, whereas with Method A, the lines would wrap underneath the marked-up number (see Figure 8-3 for a comparison).

Figure 8-3: Comparison of the wrapping of lines in Methods A and B

List Types

While the default list style for ordered lists is most commonly Arabic numerals (1, 2, 3, 4, 5, etc.), using CSS, we change this to a variety of styles using the list-style-type property. The value of list-style-type could be one of the following:

• decimal: 1, 2, 3, 4, etc. (commonly the default)

• upper-alpha: A, B, C, D, etc.

• lower-alpha: a, b, c, d, etc.

• upper-roman: I, II, III, IV, etc.

• lower-roman: I, ii, iii, iv, etc.

• none: No numeral

So, for instance, if we wanted to have Method B generate uppercase Roman numerals instead of the default, we could write a CSS declaration like this:

 ol li {   list-style-type: upper-roman;   } 

Figure 8-4 displays how this Method B, with the preceding CSS, would be viewed in a browser. Instead of the default Arabic numerals, our instruction list is numbered with Roman numerals. The markup, of course, stays exactly the same. Change your mind? One quick little CSS update using one of the values listed previously will change your list numbering to whatever you'd like.

Figure 8-4: An ordered list with Roman numerals

HTML's type attribute: Previously, one might use the type attribute directly on the <ol> element to change the list type to Roman numerals, letters, etc. However, the type attribute has been deprecated in HTML 4.01 in favor of using the CSS rules outlined earlier. Therefore, you shouldn't use the type attribute, but rather CSS instead.

Later, in the "Extra credit" section, we'll take our ordered instruction list and style it with CSS. But first, let's take a look at another list type example.

---