HTML Ordered Lists

Understanding HTML Ordered Lists

An HTML ordered list groups related items when their sequence, ranking, or position is important.

Ordered lists use the <ol> element to contain the list and <li> elements to define each individual list item.

Ordered List Syntax

An ordered list begins with the <ol> element. Each item within the list is placed inside an <li> element.

<ol>
  <li>Open the file.</li>
  <li>Edit the HTML.</li>
  <li>Save the file.</li>
</ol>

Browsers normally display the items with sequential numbers, beginning with 1.

The <ol> Element

The <ol> element represents a list where the order of the items is meaningful. Changing the sequence could change the meaning or usefulness of the list.

<ol>
  <li>Create the HTML document.</li>
  <li>Add the page content.</li>
  <li>Open the document in a browser.</li>
</ol>

Ordered lists are commonly used for instructions, procedures, rankings, sequences, and other content where position matters.

The <li> Element

The <li> element represents an individual list item. Within an ordered list, each <li> participates in the list's numbering or other ordered marker system.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

By default, the browser automatically determines the number displayed for each item according to its position in the list.

The type Attribute

The type attribute can change the numbering system used by an ordered list.

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

The type attribute supports several values for ordered-list markers.

• 1 — decimal numbers: 1, 2, 3
• A — uppercase letters: A, B, C
• a — lowercase letters: a, b, c
• I — uppercase Roman numerals: I, II, III
• i — lowercase Roman numerals: i, ii, iii

The default is decimal numbering when no type attribute is specified.

The start Attribute

The start attribute changes the number from which an ordered list begins. Its value is specified as an integer even when another marker style, such as letters or Roman numerals, is displayed.

<ol start="5">
  <li>Item five</li>
  <li>Item six</li>
  <li>Item seven</li>
</ol>

This list begins with 5 instead of the default value of 1.

<ol type="A" start="3">
  <li>Third item</li>
  <li>Fourth item</li>
</ol>

Because start="3" is combined with type="A", the first displayed marker is C.

The reversed Attribute

The boolean reversed attribute causes an ordered list to count downward instead of upward.

<ol reversed>
  <li>Third place</li>
  <li>Second place</li>
  <li>First place</li>
</ol>

When no start value is supplied, the browser determines the starting number from the number of list items.

<ol start="10" reversed>
  <li>Ten</li>
  <li>Nine</li>
  <li>Eight</li>
</ol>

The start and reversed attributes can therefore be combined when a specific descending sequence is required.

The value Attribute

The value attribute can be placed on an <li> element inside an ordered list to assign that item a specific ordinal value.

<ol>
  <li>Item one</li>
  <li value="5">Item five</li>
  <li>Item six</li>
</ol>

After the second item is assigned the value 5, numbering continues from that value, so the following item is numbered 6.

When to Use an Ordered List

Use an ordered list when the sequence of the items carries meaning. Instructions, step-by-step procedures, rankings, chronological events, and prioritized items are common examples.

If the items belong together but their order does not matter, an unordered list is usually the more appropriate choice.

HTML Ordered List Example

The following example demonstrates several ordered-list options. Change the type, start, or reversed attributes to see how they affect the list markers.

Ordered List Best Practices

• Use <ol> when the order or sequence of the items carries meaning.
• Place each individual item inside an <li> element.
• Allow the browser to generate sequential numbering rather than manually typing numbers into the list items.
• Use start when a list needs to begin at a particular ordinal value.
• Use reversed when the list needs to count downward.
• Use an <li> element's value attribute only when a particular item's ordinal value needs to change.
• Use an unordered list when the sequence of the items is not meaningful.

Summary

The HTML <ol> element creates an ordered list, while <li> defines each list item. Ordered lists are useful when sequence or position matters. The type, start, and reversed attributes control the list's numbering, while the value attribute can assign a specific ordinal value to an individual list item.