HTML / HTML Tags

HTML <Ol> Tag

Dec 12, 2022
2 min read
HTML ol Tag

Definition

The <ol> tag is used to create an ordered list, which is typically a numbered list.

Example

<ol reversed start="4" >
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ol>

Usage

  • An opening and closing tag is required.

  • The <ol> element is used with child <li> elements representing the list items.

  • A <script> or <template> elements are also allowed as child elements.

  • The <ol> and <li> elements may be repeatedly nested within each. For example:

    <ol>
    <li>first item
      <ol>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ol>
    </li>
    <li>second item</li>
    <li>third item</li>
    </ol>

  • You can alternate between <ol> and <ul> elements as required. For instance, you can start with a bullet list and have a nest numbered list.

    <ol>
    <li>first item
      <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>
    </li>
    <li>second item</li>
    <li>third item</li>
    </ol>

Attributes

The <ol> element supports the Global Attributes, as well as the following:

  • reversed

    The reversed attribute is a boolean that specifies that the list items are in reverse order.

  • start

    The start attribute is a number from which you wish the list to start. This is always an Arabic number (1, 2, 3, 4, 5, 6, etc.), even if a different type attribute is used.

  • type

    The type attribute sets the type of numbering the list uses.

    Values can include:

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

    For example, to set Roman numeral numbering:

    <ol type="i" >
      <li>first item</li>
      <li>second item</li>
      <li>third item</li>
    </ol>

Best Practices

  • The <ol> element represent an ordered list. This means the order matters and is more suitable for a list of steps or directions. If the order does not matter, you should use an unordered list using the <ul> tag.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes