ol element is similar to the
ul element in that it’s used to group a
collection of items together in a list. Each list item is defined by a
li element, which suggests an order
of importance or sequence, as
ol is an abbreviation of
ordered list. The
ol may be used to mark up a series of
steps that someone has to undertake, a table of contents, or a numbered
list of references.
There’s very little difference
between the way browsers render a list that’s marked up with a
ul and one that’s marked up with an
ol—with one exception: the bullets in an unordered list
are replaced with a series of incrementing numbers, as shown in Figure 1.
Some level of customization is provided with the
ol in terms of the numbering style that’s used (you can
set this style using the
type attribute), but the
preferred method for setting the sequence notation is through CSS.
The example above shows a fairly simple set of instructions, but
you can also nest one or more lists inside a parent list item, perhaps to
expand upon one of the points. If we wanted to expand the “Remove outer
casing …” section in the list shown in Figure 1, we could
start a new unordered list inside that list item. The closing
</li> for the first list item doesn’t appear until after the
nested list is completed (see the notes in the markup
<ol> <li>Remove the outer casing by pushing the plastic rivets through. <!— note that this list item is not closed here —> <ul> <li>They break easily—be gentle!</li> <li>Avoid pushing them through with a sharp edge, in case you slip (it may hurt).</li> </ul> </li> <!— the parent for the nested list is actually closed here —> <li>Disconnect the main power harness from the inner unit (unclip).</li> <li>Remove connection to the glow plug.</li> <li>Extract unit, keeping upright at all times.</li> </ol>
The result of this nesting can be seen in Figure 2.
ol is used here to mark up a list of maintenance
<ol> <li>Remove the outer casing by pushing the plastic rivets through.</li> <li>Disconnect the main power harness from the inner unit (unclip).</li> <li>Remove connection to the glow plug.</li> <li>Extract unit, keeping upright at all times.</li> </ol>
Use This For …
This element can be used with any content that needs to be rendered (and thus possibly referenced elsewhere) with some kind of numerical or alphabetical notation, which could include:
- a chart or ranking table
- how-to guides (“Just follow these simple steps.”)
- a running order
- a series of geographical waypoints
Every browser listed supports this element type.