1. html
  2. /tags
  3. /ol

<ol>

Overview

The <ol> element defines an ordered list on a webpage, displaying items with sequential markers such as numbers, letters, or Roman numerals.

Examples and Usage

The HTML <ol> and <ul> elements both represent lists on a webpage. However, the order of items in an <ol> is meaningful, making them ideal for contexts like step-by-step instructions or rankings to name a few. In some cases, the choice of marker can be critical, like when representing chapters in a book or items in a legal document.

Let's observe a basic ordered list, which by default, renders with sequential numbers:

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

Output:

1. First item
2. Second item
3. Third item

You can also embed lists within lists. For instance, combining an ordered list with a nested unordered list:

<ol>
  <li>First item
    <ul>
      <li>Sub-item A</li>
      <li>Sub-item B</li>
    </ul>
  </li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output:

1. First item
   - Sub-item A
   - Sub-item B
2. Second item
3. Third item

Other structures might require nesting multiple ordered lists:

<ol>
  <li>First item
    <ol>
      <li>Sub-item 1.1</li>
      <li>Sub-item 1.2</li>
    </ol>
  </li>
  <li>Second item</li>
</ol>

Output:

1. First item
   1. Sub-item 1.1
   2. Sub-item 1.2
2. Second item

Legal documents or book outlines often use Roman numerals to denote sections or chapters:

<ol type="I">
  <li>Introduction</li>
  <li>Historical Background</li>
  <li>Analysis and Findings</li>
</ol>

Output:

I. Introduction
II. Historical Background
III. Analysis and Findings

As demonstrated in the examples above, ordered lists can be tailored to fit various contexts. Specific attributes of the <ol> element, which we'll explore next, offer this customization.

Attribute Breakdown

In addition to global attributes, the <ol> element comes with a set of specific attributes to customize its behavior:

AttributeDescription
reversedA Boolean attribute indicating that the list items are in reverse order, counting from high to low.
startSets the initial value for the list's numbering. It's always an Arabic numeral regardless of the type.
typeDetermines the numbering style: "a" (lowercase letters), "A" (uppercase letters), "i" (lowercase Roman numerals), "I" (uppercase Roman numerals), or "1" (numbers, default).

Accessibility Aspects

The <ol> element inherently assumes the ARIA role of list. This role informs assistive technologies that the content should be interpreted as a list of items. Developers should be cautious when assigning additional roles, as not all roles are compatible with the intended purpose of an ordered list. The global aria-* attributes are permissible, but the direct assignment of these semantics in the markup is discouraged.

Associated Elements

  • <li>
  • <menu>
  • <ul>

Additional Notes

  • If an <ol> element doesn't have a specified starting value through the start attribute, it defaults to 1. However, if the reversed attribute is present, it will start from the total number of <li> elements within.

  • The type attribute can influence the list's visual representation, but the order remains critical. Thus, regardless of whether you're using numbers, letters, or Roman numerals, the sequence is preserved and meaningful.

  • For more styling flexibility, the CSS list-style-type property can be used to adjust the visual representation of list items.

  • While the type attribute in <ol> sets the kind of marker, the actual rendering is influenced by the browser's interpretation and the CSS in effect. Therefore, testing is advised to ensure consistent display.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support, refer to the first link in the Useful Resources below.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer
SupportYesYes*YesYesYesYes*

Useful Resources

Can I use HTML element: ol

The HTML Living Standard Specification: ol