HTML Ordered Lists: Complete Guide with Examples

Learn to create numbered and lettered lists in HTML using the `<ol>` and `<li>` tags. This tutorial covers basic ordered lists, controlling numbering styles (type and start attributes), nested lists, and provides clear examples with copyable code snippets.

Creating Ordered Lists in HTML

Ordered lists in HTML display items in a numbered or lettered sequence. They're ideal for presenting information where the order matters.

Basic Ordered Lists

An ordered list is created using the <ol> (ordered list) element. Each item in the list is defined with the <li> (list item) element.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

            1. Coffee

            2. Tea

            3. Milk
        

Controlling List Numbering

The type attribute of the <ol> tag lets you specify the list marker type:

(Examples for each type would be added here following the same structure as the basic ordered list example above.)

Try it Yourself » (for each type)

Starting Numbering from a Specific Value

Use the start attribute in the <ol> tag to begin the numbering sequence from a different number than 1:

<ol start="5">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Nested Ordered Lists

You can create nested lists (lists within lists) by placing <ol> elements inside other <ol> or <li> elements.

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

Summary Table