HTML Ordered Lists

The Ordered Lists are used to show a set of items in a proper order. The HTML <ol> tag defines an ordered list. 

The Ordered list can be numerical or alphabetical, i.e. It uses numbers, or alphabets to show a set of items in order.

Ordered HTML List

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:

Example

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

1. Coffee
2. Tea
3. Milk

Ordered HTML List - The Type Attribute

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

Below is the list of all types of list item marker.

Type	Description
type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers

Numbers:

<ol type="1">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

1. Coffee
2. Tea
3. Milk

Uppercase Letters:

<ol type="A">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

1. Coffee
2. Tea
3. Milk

Lowercase Letters:

<ol type="a">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

1. Coffee
2. Tea
3. Milk

Uppercase Roman Numbers:

<ol type="I">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

1. Coffee
2. Tea
3. Milk

Lowercase Roman Numbers:

<ol type="i">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

1. Coffee
2. Tea
3. Milk

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:

Example

<ol start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

50. Coffee
51. Tea
52. Milk

Nested HTML Lists

Lists can be nested (list inside list):

Example

<ol>

  <li>Coffee</li>

  <li>Tea

    <ol>

      <li>Black tea</li>

      <li>Green tea</li>

    </ol>

  </li>

  <li>Milk</li>

</ol>

1. Coffee
2. Tea
   1. Black tea
   2. Green tea
3. Milk

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

Chapter Summary

Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list