Open In App

How to create a list with roman number indexing in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, We are going to create a list with roman number indexing. In HTML, A list is a record of short pieces of information, such as people’s names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find. 

Approach: There are different types of lists in HTML. One of them is Ordered list or ol.  Ordered list uses <ol> tag.   To create an ordered list with roman number indexing we will use attribute type. The type attribute of the <ol> tag defines the numbering type of the list items. The default value of the type attribute in the ordered list is number. So for example, if we want the list with alphabets we simply give value “a” to type attribute. Similarly for creating a list with roman number indexing we have to provide the first roman number value to the type attribute. 

Syntax:

<ol type="I">

Below is the implementation of the above approach.

 

Example 1: In this example, we will create a list with uppercase roman number indexing. For that, we will provide attribute type value to “I”.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h2 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h2>Ordered List with Roman Numbers</h2>
    <ol type="I">
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA</li>
        <li>SASS</li>
    </ol>
</body>
  
</html>


Output:

GFG

Example 2: Now we will create a list with lowercase roman number indexing. The entire code will be the same as before we will just change the type attribute value from “I” to “i” now.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h2 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h2>
        Ordered List with LowerCase 
        Roman Numbers
    </h2>
      
    <ol type="i">
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA</li>
        <li>SASS</li>
    </ol>
</body>
  
</html>


Output:

GFG



Last Updated : 18 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads