HTML Ordered Lists

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:


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


Type Attribute

The type attribute of the <ol> tag defines the type of the list item marker:

1. type="1" (numbers)


<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

2. type="A" (uppercase)


<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

3. type="a" (lowercase)


<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

4. type="I" (uppercase Roman numbers)


<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

5. type="i" (lowercase Roman numbers)


<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

start="50"


<ol start="50">
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ol>

type="A" start="3"


<ol type="A" start="3">
  <li>Pen</li>
  <li>Pencil</li>
</ol>

Nested HTML Lists

Lists can be nested (a list inside another list):

Example

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

Note: A list item (<li>) can contain a new list and other HTML elements, like images and links, etc.

<<< Back