HTML and CSS Reference
In-Depth Information
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.
creaT
rea inG nuMbered LisTs
reaT
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.
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 num-
ber 4. The browser handles all the renumbering,
automatically.
FiGure 14-1
