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 uppercase roman numbers in HTML?
An ordered list is a numbered list of items that allows you to control the sequence number and group related items in a structured format. HTML supports various types of ordered lists using the <ol> tag, with list items defined by the <li> tag.
The type attribute of the <ol> tag determines the numbering style. To create an ordered list with uppercase Roman numerals, we use type="I". This displays list items as I, II, III, IV, V, and so on.
Syntax
Following is the syntax to create an ordered list with uppercase Roman numerals −
<ol type="I"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
The type="I" attribute specifies that list items should be numbered with uppercase Roman numerals starting from I.
Basic Example with Uppercase Roman Numerals
Following example demonstrates creating a simple ordered list with uppercase Roman numeral numbering −
<!DOCTYPE html>
<html>
<head>
<title>Uppercase Roman Numerals List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student List</h2>
<ol type="I">
<li>Abdul</li>
<li>Jason</li>
<li>Yadav</li>
<li>Lokesh</li>
</ol>
</body>
</html>
The output displays the list items numbered with uppercase Roman numerals −
Student List I. Abdul II. Jason III. Yadav IV. Lokesh
Example with More List Items
Following example shows an ordered list with uppercase Roman numerals for a longer list −
<!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 shows eight teams numbered with uppercase Roman numerals −
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
Comparison of Ordered List Types
HTML provides several type attribute values for different numbering styles −
| Type Value | Numbering Style | Example |
|---|---|---|
type="1" |
Default decimal numbers | 1, 2, 3, 4 |
type="A" |
Uppercase letters | A, B, C, D |
type="a" |
Lowercase letters | a, b, c, d |
type="I" |
Uppercase Roman numerals | I, II, III, IV |
type="i" |
Lowercase Roman numerals | i, ii, iii, iv |
Starting from a Specific Number
You can combine the type attribute with the start attribute to begin numbering from a specific value −
<!DOCTYPE html>
<html>
<head>
<title>Starting from Roman V</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Continuation List</h2>
<ol type="I" start="5">
<li>Fifth Item</li>
<li>Sixth Item</li>
<li>Seventh Item</li>
</ol>
</body>
</html>
The output starts from Roman numeral V instead of I −
Continuation List V. Fifth Item VI. Sixth Item VII. Seventh Item
Conclusion
To create an ordered list with uppercase Roman numerals in HTML, use the <ol type="I"> tag with <li> elements for each list item. This numbering style displays items as I, II, III, IV, and so on. You can also use the start attribute to begin numbering from a specific Roman numeral value.
2K+ Views
