HTML Ordered List

HTML element <ol> is used to define an ordered list with element <li> defining each item of the list as shown below.

  • Element <ol> to define an ordered list
  • Element <li> to define each item of a list

By default, each item on the list is marked with numbers.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

List Numbering Styles

HTML ordered list default numbering style can be changed to any of the below types by adding an additional attribute type as shown.

  • type="1" (default)
  • type="I" (for uppercase Roman Numbers)
  • type="i" (for lowercase Roman Numbers)
  • type="A" (for uppercase alphabets)
  • type="a" (for lowercase alphabets)
<ol type="A">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Examples

We can check the outcome of the below HTML document to see how it looks.

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Ordered List</h1>
    <hr>
    <h2>Default numbering (numbers)</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    <h2>Numbering type = I</h2>
    <ol type="I">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    <h2>Numbering type = i</h2>
    <ol type="i">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    <h2>Numbering type = A</h2>
    <ol type="A">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    <h2>Numbering type = a</h2>
    <ol type="a">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
</body>
</html>

Other List Types

Take a look at the article on HTML Lists to know more about other types of HTML lists.

Overall

We can use an ordered list when we need to group a list of items and we need to number them.