September 21, 2022

How to Change Ordered List to Roman Numerals in HTML

In this tutorial, we will learn how to change ordered list to roman numerals in HTML. In an ordered list, the items can be marked in numbers, roman numerals, alphabets, or none. By default, the ordered list items are always marked with numbers.

An ordered list is created using the ol element and each list item is wrapped with the li element. To change a number list into a roman numeral in an ordered list, we can make use of the type attribute in ol element. You can write roman numerals in uppercase as well as lowercase.

For obvious reasons, we are not going to cover how to convert a number to roman numeral, but you can use online roman numeral converter tool to convert a number to roman numeral and vice versa.

In the following example, we will demonstrate how we can change the default number list to a roman numeral in an ordered list. Please have a look over the code example and the steps given below.

HTML

We have 2 ol elements in the HTML file and both ol elements have 4 different list items.

The first ol element has a type attribute with the value of uppercase roman numeral (I), which will change the default number lists to uppercase roman numerals.
The second ol element also has a type attribute with the value of lowercase roman numeral (i), which will change the default number lists to lowercase roman numerals.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ordered list</title>
</head>

<body>
    <ol type="I">
        <li>Milk</li>
        <li>Sugar</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ol>

    <ol type="i">
        <li>Milk</li>
        <li>Sugar</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ol>

</body>

</html>

You May Also Like: