ol (HTML element)

Description

The 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.

Figure 1. Rendering an ordered list with a series of incrementing numbers

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 below):

<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.

Figure 2. Nesting an unordered list within an ordered list

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

Compatibility

Every browser listed supports this element type.