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.
- 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.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">