ol element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Table of contents

Description

The ol element represents an ordered list of items that, in contrast with unordered lists (ul element), produces a different meaning if the items order is altered. The items in both lists, ordered and unordered, are represented by the li element.

HTML5 has reinstated the attributes start and type (deprecated in previous versions) because they proved to have a semantic value.

The compact attribute of this element has been removed from the HTML5 specification because of its presentational nature. Authors should replace its functionality with style sheets declarations.

Examples

The following example shows a very basic usage of the ol element. It's easy to see how the meaning would get profoundly altered if the items' order was changed.

<p>Procedure to enter setup:</p>
<ol>
  <li>Turn on the computer.</li>
  <li>Press the <kbd>DEL</kbd> key when prompted.</li>
  <li>Input the password</li>
</ol>

Procedure to enter setup:

  1. Turn on the computer.
  2. Press the DEL key when prompted.
  3. Input the password

Attributes

Specific attributes

reversed

A boolean value indicating if the order in the list is ascendant or descendant. If the attribute takes the values "reversed" or the empty string (""), or if its just present (with no value), the list has a descendant order.

Example

<p>These are my top 5 rock bands:</p>
<ol reversed>
  <li>Red hot chili peppers</li>
  <li>Aerosmith</li>
  <li>Metallica</li>
  <li>The doors</li>
  <li>Rolling stones</li>
</ol>

These are my top 5 rock bands:

  1. Red hot chili peppers
  2. Aerosmith
  3. Metallica
  4. The doors
  5. Rolling stones

start

A number specifying the ordinal value of the first item in the list.

Example

<p>Now continue with the following instructions:</p>
<ol start="8">
  <li>Press <kbd>F10</kbd> key.</li>
  <li>Confirm to exit</li>
</ol>

Now continue with the following instructions:

  1. Press F10 key.
  2. Confirm to exit

type

The type of symbols to use in the markers. There are five possible values, all case-sensitive:

  • 1: integers (1, 2, 3...).
  • a: lower-case letters (a, b, c...).
  • A: upper-case letters (A, B, C...).
  • i: lower-case roman numerals (i, ii, iii...).
  • I: upper-case roman numerals (I, II, III...).

Although this attribute may seem merely presentational, it has vital meaning in cases where other parts of the document refer to a specific item in the list. In such cases the reference may be done by naming the marker.

Example

<p>... Take special note of chapter III.</p>
<ol type="I">
  <li>A shifting reef</li>
  <li>Pro and con</li>
  <li>I form my resolution</li>
</ol>

... Take special note of chapter III.

  1. A shifting reef
  2. Pro and con
  3. I form my resolution

compact

A boolean value indicating if the list items should be displayed in compact mode. If the attribute is present, the compact mode will be enabled.

This attribute has become obsolete in HTML5 and its use is no longer valid. Authors are encouraged to use style sheets instead.

Example

<ol compact>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.