HTML Ordered Lists | Numbers List

Updated on December 8, 2022 by Muhammad Zeeshan

Share:

In this tutorial, you’ll learn HTML ordered lists, what they are, how to create an ordered list in HTML, and their different types with code examples.

What are HTML Ordered Lists?

HTML Ordered lists are those type of lists that displays list items marked with numbers, alphabets, and roman numbers. Ordered lists are also known as numbered lists.

By default, every list item of an ordered list is marked with numbers. The example below shows what an Ordered list looks like.

However, we can replace the markers according to pre-defined types.

How to Make an Ordered List in HTML

To make an ordered list in HTML, we use a pair of<ol> tags that define an ordered list. Inside <ol> tags, we use a pair of <li> tags to specify each item of a list.

The following example shows the HTML code to create an ordered list:

<ol>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Orange</li>
    <li>Yellow</li>
</ol>

Remember, all HTML tags must be closed.

HTML Ordered Lists – Type Attribute

We use the type attribute inside <ol> tag to specify what to use instead of numbers. Mean you can change the list item markers into alphabets, or roman numbers. We have 4 types of pre-defined values for the type attribute as shown below.

The following code examples will explain all values of the type attribute for HTML-ordered lists.

1- Uppercase Letters

The following code shows how to use uppercase letters in HTML ordered list.

<ol type="A">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Orange</li>
    <li>Yellow</li>
</ol>

The output will look like this below:

2- Lowercase Letters

HTML code for lowercase letters in an ordered list.

<ol type="a">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Orange</li>
    <li>Yellow</li>
</ol>

Code output:

3- Uppercase Roman Numbers

The code below shows how to use roman numbers in an ordered list.

<ol type="I">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Orange</li>
    <li>Yellow</li>
</ol>

Code Output:

4- Lowercase Roman Numbers

<ol type="i">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Orange</li>
    <li>Yellow</li>
</ol>

Code Output:

5- Numbered List

You can use type="1" inside <ol> tag to specify numbered lists. But this is not necessary because by default ordered lists are numbered.

Nested Ordered List HTML

HTML Ordered lists can be nested. Mean you can insert one list inside another. The following image shows a nested ordered list code example.

The Code output will look like this below in your browser:

This is how you can create a nested ordered list in HTML. You can learn more tricks in this tutorial about Nested Lists in HTML.

The start Attribute

We use the start attribute inside the starting <ol> tag to control the counting of HTML-ordered list items. Mean you can start counting from 5 or anything instead of 1. The following code example demonstrates how:

<ol start="5">
    <li>Web Development</li>
    <li>Web Designing</li>
    <li>UI</li>
    <li>Programming</li>
    <li>GitHub</li>
</ol>

The list in the following image is starting from 5 instead of 1:

That’s all. Now, you know everything about HTML Ordered Lists.

If you have any questions related to this tutorial then feel free to ask in the comment section below.

Related Tutorial: HTML Unordered lists.

Topic: HTML

About The Author

Muhammad Zeeshan

Hi everyone, I'm a Full Stack Web Developer and Technical Writer. I just love to share my knowledge to help others in this community. I mostly write about HTML, CSS, JS, MySQL, and PHP.