HTML Ordered Lists | Numbers List

HTML Ordered Lists

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.

HTML Ordered List Example

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.

Attribute and its valueDescription
type=”A”use for specifying uppercase alphabets
type=”a”use for specifying lowercase alphabets
type=”I”for specifying uppercase roman numbers
type=”i”for specifying lowercase roman numbers
type=”1″to specify the number (default value)

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:

HTML Ordered List with Uppercase alphabets
Uppercase Alphabets

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:

HTML Ordered List with lowercase alphabets
Lowercase Alphabets

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:

List with Uppercase Roman Numbers
Uppercase Roman Numbers

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:

List with Lowercase Roman Numbers
Lowercase Roman Numbers

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.

Nested Ordered List HTML example

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

HTML Nested Ordered Lists output

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:

Start Attribute for Ordered List

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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Scroll to Top