HTML Ordered List

We use <ol> tag to make an ordered list in html. An ordered list is made to make a list of items in ordered form, ordered list can be either numerical or alphabetical.

Ordered HTML list

An ordered list starts with an <ol> tag and end with </ol> tag. And in ordered list we have list of items to give content to our list and it starts with <li> tag and ends with </li> tag. The list items will be marked with numbers by default.

For example:

<ol>
<li>coffee</li>
<li>tea</li>
<li>milk</li>   
</ol>

Output:

In this example, we have used a <ol> tag for making the ordered list. And then we have used <li> tag for making the list items, and that’s how we create an ordered list in html.

Type attribute: Ordered list in type attribute

We use type attribute in html ordered list just to define the type of the list item marker.

Types and description:

1. Type=’1’ : The list item will be numbered with numbers by (default)
2. Type=’A’ : The list item will be numbered with upper case alphabets.
3. Type=’a’ : The list items will be numbered with lower case alphabets.
4. Type=’I’ : The list items will be numbered with upper case roman numbers.
5. Type=’I’ : The list items will be numbered with lower case roman numbers.

Example of any one type would be:

<ol type='A'>
<li>coffee</li>
<li>tea</li>
<li>milk</li>
</ol>

And the output would be:

A) Coffee
B) Tea
C) Milk

And we can try out others as well in the same manner.

Control list counting

So we are talking about ordered list then we should know that, an ordered list will always start counting from 1. But if someone wants to start his ordered list from some other number then he can use start attribute and start his list from any number of his choice.

For example:

<ol start=”50”>
<li>coffee</li>
<li>tea</li>
<li>milk</li>
</ol>

Output:

Nested HTML list

In html we can have nested lists which means lists inside list.

For example:

<ol>
<li>coffee</li>
<li>tea
<ol>
<li>black tea</li>
<li>green tea</li>
</ol>
</li>
<li>milk</li>
</ol>

Output:

Tip:

A <li> in html can contain a new list because of its nested property but the thing is that it can also contain html elements, like images, links and many other things as well.