deCODE - Our Newsletter for Jan 2022 is available for Download. 🗞   🥳
  Signup/Sign In

How to create HTML list with Roman numbers?

The <ol> list in HTML is created using the numbers by default. But we have seen in many web pages that the <ol> list uses the roman numbers. Both uppercase and lowercase Roman numbers can be added to the ordered list in HTML.

Let's create a list with roman numbers.

Adding lower case roman number

The type attribute is used to add different markup within <ol> tag. To add lowercase roman number use type="i" within the <ol> tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML </title> 
</head>
<body>
    <h2> ordered list with lowercase roman number </h2>
	<ol type="i">
	  <li> case 1</li>
	  <li> case 2</li>
	  <li> case 3</li>
	  <li> case 4</li>
	</ol>
</body>
</html>

Output

Here is the output of the above program.

lowercase roman number

Adding an uppercase roman number

To add the uppercase roman number to the ordered list, use type="I" within the <ol> tag. Here is an example to add the uppercase roman number to an ordered list.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML </title> 
</head>
<body>
    <h2> ordered list with uppercase roman number </h2>
	<ol type="I">
	  <li> case 1</li>
	  <li> case 2</li>
	  <li> case 3</li>
	  <li> case 4</li>
	</ol>
</body>
</html>

Output

Here is the output of the above program.

uppercase roman number

Conclusion

The ordered list can be easily added with different markups in HTML. The type attribute is used to add roman numbers in an ordered list. We can use roman numbers in uppercase as well as lowercase to add them to the ordered list.