Ordered List in HTML
Working with List
In this lesson, we will learn how to create and use the ordered list in HTML.
What is Ordered List in HTML
The ordered list is an HTML element that creates a list of items numbered in a particular order. The <ol> tag is used to create an ordered list. Each list item in the ordered list is defined by the <li> tag. The list items are automatically numbered by the browser in ascending order.
To create an ordered list in HTML, we first need to open the <ol> tag and add our list items within the <li> tags.
Here's an example of how to create an ordered list in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ordered List Example</title>
</head>
<body>
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
</body>
</html>Types of Ordered Lists
Different types of ordered lists can be created in HTML. The ordered list uses decimal numbers (1, 2, 3, etc.) by default. But you can use the type attribute to specify a different type of numbering. The following are the different types of numbering that are supported:
Uppercase Letters
The type attribute can be set to "A" to create an uppercase letters ordered list. Here is an example:
Example
<ol type="A">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>Lowercase Letters
The type attribute can be set to "a" to create a lowercase letters ordered list. Here is an example:
Example
<ol type="a">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>Uppercase Roman Numbers
The type attribute can be set to "I" to create an uppercase roman numbers ordered list. Here is an example:
Example
<ol type="I">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>Lowercase Roman Numbers
The type attribute can be set to "i" to create a lowercase roman numbers ordered list. Here is an example:
Example
<ol type="i">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>Nested Ordered Lists
Ordered lists can also be nested inside an existing list item. It is useful when there are multiple levels of information to present. To nest an ordered list, we simply add another <ol> tag inside an existing <li> tag. Here is an example:
Example
<ol>
<li>List item</li>
<li>List item
<ol>
<li>Nested list item</li>
<li>Nested list item</li>
<li>Nested list item</li>
</ol>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>The start Attribute
The start attribute in the <ol> tag specifies the ordered list's starting number. By default, the ordered list starts with the number 1. However, you can change the starting number of the list using the start attribute.
Suppose you want to create an ordered list that starts with the number 5. You can use the start attribute to achieve this. See the example given below.
Example
<ol start="5">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>Suppose you want to create an uppercase letters ordered list that starts with the alphabet E. You can use the type attribute and the start attribute to achieve this. See the example given below.
Example
<ol type="A" start="5">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>The reversed Attribute
The reversed attribute is used to reverse the order of the list's numbering. By default, the list's numbers are displayed in ascending order. However, you can use the reversed attribute to display the list's number in descending order. For example:
Example
<ol reversed>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<ol type="a" reversed>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>Note: The reversed attribute does not have any value.
The id Attribute
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the <ol> tag and use it to apply a specific style to that particular tag.
Example
<ol id="mylist">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>In the above example, we assign an id attribute to the ol tag with a value mylist. In CSS and JavaScript, we can use the name mylist to access the specific ol tag whose id value is set to the name mylist.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
The class Attribute
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the ol tags and use it to apply a specific style to all the ol tags that belong to a particular class.
Example
<ol class="info">
<li>Cat</li>
<li>Dog</li>
<li>Goat</li>
</ol>
<ol class="info">
<li>India</li>
<li>Australia</li>
<li>Africa</li>
</ol>In the above example, both ol tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both ol tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
The style Attribute
The style attribute can be used to apply inline css styles to both ol and li tags. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<ol style="color: red">
<li>India</li>
<li>Australia</li>
<li>Africa</li>
</ol>The style="color: red" will change the font color of all the list items of the ol tag to red.
The title Attribute
The title attribute can be used to add a tooltip or additional information to the ol tag, which will only appear when the user places the mouse cursor on the ordered list.
Example
<ol title="List of Countries">
<li>India</li>
<li>Australia</li>
<li>Africa</li>
</ol>