Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create an ordered list with list items numbered with lowercase roman numbers in HTML?
A list is a collection of connected items written consecutively, usually one below the other. HTML provides two main types of lists: unordered lists and ordered lists.
An ordered list displays items with sequential markers like numbers, letters, or Roman numerals. You create an ordered list using the <ol></ol> tag and define individual list items with <li></li> tags.
HTML supports 5 types of ordered list numbering systems using the type attribute −
type="1" − Creates a numbered list starting from 1 (default).
type="A" − Creates a list numbered with uppercase letters starting from A.
type="a" − Creates a list numbered with lowercase letters starting from a.
type="I" − Creates a list numbered with uppercase Roman numerals starting from I.
type="i" − Creates a list numbered with lowercase Roman numerals starting from i.
Syntax
Following is the syntax to create an ordered list with lowercase Roman numeral markers −
<ol type="i"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
The type="i" attribute tells the browser to use lowercase Roman numerals (i, ii, iii, iv, v, vi, etc.) instead of the default Arabic numerals.
Basic Example with Lowercase Roman Numerals
Following example demonstrates creating a simple ordered list with lowercase Roman numeral markers −
<!DOCTYPE html>
<html>
<head>
<title>Lowercase Roman Numerals List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Names</h2>
<ol type="i">
<li>Abdul</li>
<li>Jason</li>
<li>Yadav</li>
<li>Lokesh</li>
</ol>
</body>
</html>
The output shows each student name preceded by lowercase Roman numerals −
Student Names i. Abdul ii. Jason iii. Yadav iv. Lokesh
Extended Example with More Items
Let us look at another example with more list items to see how Roman numerals progress −
<!DOCTYPE html>
<html>
<head>
<title>World Cup Teams</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>List of Teams for World Cup</h1>
<ol type="i">
<li>India</li>
<li>Australia</li>
<li>South Africa</li>
<li>New Zealand</li>
<li>Pakistan</li>
<li>Sri Lanka</li>
<li>West Indies</li>
<li>Bangladesh</li>
</ol>
</body>
</html>
The output displays all eight teams with consecutive lowercase Roman numeral markers −
List of Teams for World Cup i. India ii. Australia iii. South Africa iv. New Zealand v. Pakistan vi. Sri Lanka vii. West Indies viii. Bangladesh
Using the Start Attribute
You can combine the type="i" attribute with the start attribute to begin numbering from a specific Roman numeral −
<!DOCTYPE html>
<html>
<head>
<title>Starting from Custom Roman Numeral</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Modules (Starting from Module 5)</h2>
<ol type="i" start="5">
<li>Advanced JavaScript</li>
<li>React Framework</li>
<li>Node.js Backend</li>
<li>Database Management</li>
</ol>
</body>
</html>
The list starts from the fifth Roman numeral (v) instead of the first −
Course Modules (Starting from Module 5) v. Advanced JavaScript vi. React Framework vii. Node.js Backend viii. Database Management
Key Points
The
type="i"attribute creates lowercase Roman numerals: i, ii, iii, iv, v, vi, vii, viii, ix, x, etc.Roman numerals automatically continue the sequence regardless of how many items are in the list.
You can use the
startattribute to begin numbering from any integer value.The
typeattribute can be applied to the entire<ol>or individual<li>elements to override the list type.CSS can also control list numbering using the
list-style-typeproperty with the valuelower-roman.
Conclusion
Creating ordered lists with lowercase Roman numerals in HTML is straightforward using <ol type="i">. This formatting provides an elegant alternative to standard numbering and is particularly useful for formal documents, outlines, and academic content. The Roman numeral sequence automatically continues regardless of the number of list items.
8K+ Views
