HTML Ordered Lists | Numbers List
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.
Attribute and its value | Description |
---|---|
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:
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.