Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 18 Aug, 2021

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. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :