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 list with roman number indexing in HTML
Roman numerals in HTML lists provide an elegant way to display information in a classical numbering format. The <ol> (ordered list) element with the type attribute allows you to create lists using Roman numerals instead of regular numbers.
Syntax
Following is the syntax for creating Roman numeral lists in HTML
<ol type="I"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
The type attribute accepts the following values for Roman numerals
type="I"Creates uppercase Roman numerals (I, II, III, IV, V...)type="i"Creates lowercase Roman numerals (i, ii, iii, iv, v...)
Uppercase Roman Numerals
Use type="I" to display Roman numerals in uppercase format. This is commonly used for major sections or formal documents.
Example
Following example demonstrates uppercase Roman numeral indexing
<!DOCTYPE html>
<html>
<head>
<title>Uppercase Roman Numerals</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Modules</h2>
<ol type="I">
<li>HTML Fundamentals</li>
<li>CSS Styling</li>
<li>JavaScript Programming</li>
<li>Responsive Design</li>
<li>Web APIs</li>
</ol>
</body>
</html>
The output displays the list with uppercase Roman numerals
Course Modules I. HTML Fundamentals II. CSS Styling III. JavaScript Programming IV. Responsive Design V. Web APIs
Lowercase Roman Numerals
Use type="i" to display Roman numerals in lowercase format. This is often used for sub-sections or less formal contexts.
Example
Following example shows lowercase Roman numeral indexing
<!DOCTYPE html>
<html>
<head>
<title>Lowercase Roman Numerals</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Project Steps</h2>
<ol type="i">
<li>Planning and Analysis</li>
<li>Design Mockups</li>
<li>Development Phase</li>
<li>Testing and Debugging</li>
<li>Deployment</li>
</ol>
</body>
</html>
The output shows the list with lowercase Roman numerals
Project Steps i. Planning and Analysis ii. Design Mockups iii. Development Phase iv. Testing and Debugging v. Deployment
Nested Roman Numeral Lists
You can create nested lists combining different Roman numeral formats for hierarchical organization.
Example
Following example demonstrates nested lists with both uppercase and lowercase Roman numerals
<!DOCTYPE html>
<html>
<head>
<title>Nested Roman Numeral Lists</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Web Development Curriculum</h2>
<ol type="I">
<li>Frontend Technologies
<ol type="i">
<li>HTML Structure</li>
<li>CSS Styling</li>
<li>JavaScript Interactivity</li>
</ol>
</li>
<li>Backend Technologies
<ol type="i">
<li>Server-side Languages</li>
<li>Database Management</li>
<li>API Development</li>
</ol>
</li>
</ol>
</body>
</html>
The output creates a hierarchical structure using both Roman numeral formats
Web Development Curriculum I. Frontend Technologies i. HTML Structure ii. CSS Styling iii. JavaScript Interactivity II. Backend Technologies i. Server-side Languages ii. Database Management iii. API Development
Starting from a Specific Number
Use the start attribute to begin Roman numeral counting from a specific number.
Example
Following example starts the Roman numeral list from number 5
<!DOCTYPE html>
<html>
<head>
<title>Roman Numerals with Start Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Advanced Topics (Continuation)</h2>
<ol type="I" start="5">
<li>Advanced CSS Techniques</li>
<li>Modern JavaScript Features</li>
<li>Framework Integration</li>
</ol>
</body>
</html>
The output begins counting from Roman numeral V
Advanced Topics (Continuation) V. Advanced CSS Techniques VI. Modern JavaScript Features VII. Framework Integration
Comparison of List Types
Following table compares different ordered list types available in HTML
| Type Attribute | Numbering Style | Example Output | Common Use Case |
|---|---|---|---|
type="1" |
Regular numbers (default) | 1, 2, 3, 4, 5 | General lists, steps |
type="I" |
Uppercase Roman numerals | I, II, III, IV, V | Major sections, formal documents |
type="i" |
Lowercase Roman numerals | i, ii, iii, iv, v | Sub-sections, appendices |
type="A" |
Uppercase letters | A, B, C, D, E | Multiple choice options |
type="a" |
Lowercase letters | a, b, c, d, e | Sub-items, detailed lists |
CSS Alternative
You can also achieve Roman numeral lists using CSS list-style-type property for more styling control.
Example
Following example shows CSS approach to Roman numeral lists
<!DOCTYPE html>
<html>
<head>
<title>CSS Roman Numerals</title>
<style>
.roman-upper { list-style-type: upper-roman; }
.roman-lower { list-style-type: lower-roman; }
.custom-list { color: #2c3e50; font-weight: bold; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Using CSS for Roman Numerals</h2>
<ol class="roman-upper custom-list">
<li>Introduction to HTML</li>
<li>HTML Elements and Tags</li>
<li>HTML Attributes</li>
</ol>
</body>
</html>
The CSS approach provides additional styling flexibility while maintaining Roman numeral formatting.
Conclusion
Roman numerals in HTML lists are created using the <ol> element with type="I" for uppercase or type="i" for lowercase Roman numerals. This formatting is ideal for formal documents, academic papers, and hierarchical content organization. You can enhance functionality with the start attribute and combine with CSS for advanced styling.
7K+ Views
