HTML5 24-Hour Trainer

Chapter 14. Working with Ordered Lists

Ordered lists, more commonly known as numbered lists, are used when the sequence of the items is important. Though you could use a bulleted list for the Top 25 Websites, it'd be a lot harder to figure out which site placed where. Ordered lists are very flexible with a wide range of number styles — from standard, cardinal numbers to classical Roman numerals. As you'll learn in this lesson, you can nest ordered lists to create a multi-level outline. What's more, you can even combine the two list types.

CREATING NUMBERED LISTS

If you read the previous lesson, you'll have no problem understanding the code for an ordered list. Like unordered lists, the numbered variety uses two key elements: an outer wrapping tag and a separate tag for each list item. The only difference is that the outer tag is not <ul> but <ol>. Here's a brief example:

<ol>
  <li>Pull mask from overhead bin</li>
  <li>Place mask over face</li>
  <li>Pull strings tight</li>
</ol>

When rendered in a standard browser, the items appear in 1-2-3 order, as shown in Figure 14-1.

Figure 14-1. FIGURE 14-1

When it comes to editing, ordered lists provide some wonderful functionality. If a fourth <li> tag were to be added before the closing </ol> tag, a number 4 would appear before it. Should that item be inserted before the third item, it would become number 3 and the previously third item would become ...