Yugien
Theme

HTML reference

ol

The <ol> element represents a list whose order matters, such as steps in a procedure or positions in a ranking.

What you will learn

  • How to mark up meaningful order
  • How start, reversed, and li value work
  • How to choose between ol and ul

Basic example

<ol>
  <li>Open the settings</li>
  <li>Choose a language</li>
  <li>Save the change</li>
</ol>

The numbers are part of the meaning, not just decoration. Assistive technology and users can understand that the items have an order.

Useful attributes

start
Sets the number at which the list begins.
reversed
Counts down from the number of items or a supplied start value.
li value
Sets the number for a particular item and continues from it.

ol or ul?

Use ol when changing the order changes the meaning. Use ul when the items are simply a group and their order is not meaningful. CSS can change the visual marker without changing the semantics.

Related pages