Skip to main content

Ordered Lists

HTML ordered lists are used when you want to display a set of items or instructions in a specific order. These are lists where each item is marked with a number or letter, indicating the sequence of the elements. In this tutorial, we'll cover how to create ordered lists, change the list type, and nest lists within lists.

Creating an Ordered List

To create an ordered list in HTML, you use the <ol> tag to start and end the list. Each item in the list is then marked with the <li> tag (which stands for list item).

Here's a simple example:

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

In your web browser, this will appear as:

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

Changing the List Type

By default, an ordered list will start with the number 1 for the first item and continue incrementing for each subsequent item. However, you can change the type of marker used for the list items with the type attribute.

The type attribute can take the following values:

  • 1 for numeric list (default)
  • A for uppercase alphabetical list
  • a for lowercase alphabetical list
  • I for uppercase Roman numerals
  • i for lowercase Roman numerals

Here's an example of an ordered list with uppercase alphabetical markers:

<ol type="A">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

This will appear in your web browser as:

A. First item
B. Second item
C. Third item

Nesting Lists

You can also nest lists within lists to create a hierarchical structure. To nest a list, you simply start a new <ol> or <ul> (unordered list) tag within an <li> tag.

Here's an example:

<ol>
  <li>First item
    <ol>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ol>
  </li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

This will appear in your web browser as:

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

And that's it! Now you know how to create ordered lists in HTML, change the list type, and nest lists within lists. Happy coding!