Customize Ordered List in HTML with Example

An ordered list in HTML is a list of items that are arranged in a specific order. In the ordered list, each item is automatically displayed with numbers by default, indicating its position in the sequence. Therefore, it is also known as a numbered list.

When the browser displays an ordered list, it numbers and indents each of the items sequentially within the list. If we add a new item to the list or delete an existing item, the browser automatically renumbers them the next time when the web page is loaded.

This type of list is especially useful when we want to list items in a specific order. For example, top 10 favorite songs, instructions, rankings, or a series of steps. The ordered list not only makes it clear to the reader but also organizes the content in a way that’s easy to follow.

If you simply want to list a number of items or elements that can appear in any order, then use an unordered list instead. An unordered list can be an appropriate choice to group items in a list where the arrangement of the items does not matter.

Syntax to Create Ordered or Numbered List in HTML

An ordered list is surrounded by the <ol>…</ol> tags. Here, ol stands for ordered list. Each item within the list is included in the <li>…</li> (list item) tag. The basic syntax to create an ordered list is as:

<ol>
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
</ol>

In the above syntax,

<ol> (ordered list) is the opening tag that starts the ordered list.
<li> (list item) tag is an opening tag that starts the list item.
</li> tag is the closing tag that ends the list item.
</ol> is the closing tag that marks the end of the ordered list.

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Numbered or Ordered List Example</title>
</head>
<body>
<ol>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>Reat Js </li>
</ol>
</body>
</html>

[adinserter block=”5″]
When the browser parses (i.e. reads) and renders the above HTML code, it will produce the following output on the screen.

Customizing Ordered Lists in HTML

There are two ways to change or customize the numbering style in HTML. They are as:

Using CSS property: list-style-type
Using type attribute, which is obsolete in HTML5

If you’re creating a new ordered list, you should always use the CSS property. However, you may see existing web pages in which the type attribute is used instead. In this tutorial, we will use CSS property to customize the ordered list in HTML. Look at the below table for customization options.

Table: Ordered List Numbering Style

CSS Value	Attribute Value	Description
decimal	1	Standard Arabic numerals (1, 2, 3, 4, 5, and so on)
lower-alpha	a	Lowercase letters (a, b, c, d, e, and so on)
upper-alpha	A	Uppercase letter (A, B, C, D, E, and so on)
lower-roman	i	Lowercase Roman numerals (i, ii, iii, iv, and so on)
upper-roman	I	Uppercase Roman numerals (I, II, III, IV, and so on)

We can specify the types of numbering in the <ol> tag using CSS style attribute like this:

<ol style = "list-style-type: lower-alpha">

Let’s take examples based on the customizing ordered list.

Example 2:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Customization of Ordered List in HTML</title>
</head>
<body>
<ol style = "list-style-type: lower-alpha">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
</ol>

<ol style = "list-style-type: upper-roman">
   <li>Apple</li>
   <li>Orange</li>
   <li>Banana</li>
   <li>Mango</li>
</ol>
</body>
</html>

[adinserter block=”2″]

Output:

Use of start Attribute with CSS Property

Using the start attribute, we can specify the number or letter with which to start the ordered list. However, the default starting point is 1. Still, we can change this number by using start attribute like this:

<ol style = "list-style-type: lower-alpha" start = "3">

Now the numbering will start with c and move through the alphabet from there. Remember that the value for the start attribute should always be a decimal number, regardless of the numbering style being used. Look at the below example based on start attribute.

Example 3:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Displaying Last Six Months of Year and beginning of the Next Year</title>
</head>
<body>
<ol style = "list-style-type: upper-roman" start = "7">
    <li>July</li>
    <li>August</li>
    <li>September</li>
    <li>October</li>
    <li>November</li>
    <li>December</li>
    <li style = "list-style-type: lower-roman">January</a> 
</ol>
</body>
</html>

Output:

Use of value Attribute in <li> Tag

We can change the starting number of an item within an ordered list (<ol>) by using the value attribute in the <li> (list item) tag.

When we assign a new value to an item using the value attribute, the numbering of that item and all subsequent items in the list will be updated to follow from the newly assigned value. This allows for custom numbering sequences within the same list.

Example 4:

<ol>
   <li>Flour</li>
   <li>Sugar</li>
   <li>Milk</li>
   <li>Butter</li>
   <li>Baking Powder</li>
   <li value="10">Eggs</li> <!-- Restart numbering from 10 -->
   <li>Vanilla Extract</li>
   <li>Salt</li>
</ol>

Output:

In this example code, the browser will automatically number items “Flour” through “Baking Powder” from 1 to 5. The item “Eggs” is assigned a value of 10, so it will be displayed as item number 10. The following items, “Vanilla Extract” and “Salt,” will continue the numbering from there, being numbered 11 and 12, respectively.

Styling Individual Items in Ordered List

We can apply styles to individual list items in an ordered list using class or id selector. Look at the HTML code.

Example 5:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Styling Individual Items</title>
<style>
.highlight {
      color: red;
      font-weight: bold;
}
</style>
</head>
<body>
<ol>
   <li class = "highlight">HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
</ol>
</body>
</html>

Nested Lists with Custom Styles

We can also customize nested lists in various ways, including different styles for different levels. Let’s take an example on it.

Example 6:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nested Lists with Custom Styles</title>
<style>
ol {
   list-style-type: upper-alpha; /* A, B, C for top level */
}
ol ol {
   list-style-type: lower-roman; /* i, ii, iii for second level */
}
</style>
</head>
<body>
<ol>
<!--First Nested Lists-->
   <li>Item A
   <ol>
     <li>Subitem A1</li>
     <li>Subitem A2</li>
   </ol>
   </li>
<!--Second Nested Lists-->
   <li>Item B
   <ol>
     <li>Subitem B1</li>
     <li>Subitem B2</li>
   </ol>
   </li>
</ol>
</body>
</html>

An ordered list in HTML is a powerful technique for structuring content in a hierarchy. We use the <ol> element to create an ordered list, along with <li> tags for individual items. It helps to organize the content, such as instructions, rankings, or any set of items where the order matters.

We can also customize the ordered lists in various designs with the help of CSS. Hope that you will have understood the basic concepts of creating ordered lists in HTML.
Happy coding!!!