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 roman numerals in uppercase as well as lowercase.

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>