<ol>: the "ordered list" element

The HTML <ol> element represents an ordered list of elements, typically displayed as a numbered list.

Attributes

reversed

This Boolean attribute specifies that the list elements are in reverse order. Items will be numbered from top to bottom.

start

An integer at which to start counting for list items. Always an Arabic numeral (1, 2, 3, etc.), even when the type numbering is letters or Roman numerals. For example, to start numbering items from the letter "d" or the Roman numeral "iv", use start="4".

type

Set the numbering type:

  • a for lowercase letters
  • A for capital letters
  • i for lowercase Roman numerals
  • I for uppercase Roman numerals
  • 1 for numbers (default)

The specified type is used for the entire list unless a different type attribute is used on a <li> element.

Note: Unless the type of the list number is important (such as legal or technical documents where items are referenced by their number/letter), use the CSS list-style-type property instead.

Usage notes

Typically, sorted list items appear with a preceding indicator, such as a number or letter.

The <ol> and <ul> elements can nest as desired, alternating between <ol> and <ul> as you like.

The <ol> and <ul> elements both represent a list of elements. The difference is with the <ol> element, the order is significant. For example:

  • Steps in a recipe
  • Step by step directions
  • The list of ingredients in decreasing proportions on the nutritional information labels

To determine which list to use, try changing the order of the list items; if the meaning changes, use the <ol> element, otherwise you can use <ul>.

Examples

Simple example

<ol>
  <li>Uno</li>                        
  <li>Due</li>                        
  <li>Tre</li>                        
  <li>Quattro</li>
</ol>

Using Roman numerals

<ol type="i">
  <li>Uno</li>                        
  <li>Due</li>                        
  <li>Tre</li>                        
  <li>Quattro</li>
</ol>

Use the "start" attribute to vary the start of the list

<ol start="4">
  <li>Uno</li>                        
  <li>Due</li>                        
  <li>Tre</li>                        
  <li>Quattro</li>
</ol>