How to create a list with roman number indexing in HTML ?
Roman numeral indexing in HTML lists employs Roman numerals (I, II, III, etc.) for item markers. This can be achieved by specifying the type attribute of the <ol> tag as “I”, “i”, “A”, “a”, “I”, or “i”, or by manually numbering list items with Roman numerals. This guide provides all approaches for the Roman number lists in HTML.
Approach: Using the type attribute with <ol> Tag
In HTML, the <ol> type attribute sets the style of numbering for ordered lists. It offers options like:
"I"for uppercase Roman numerals"i"for lowercase Roman numerals"A"for uppercase letters"a"for lowercase letters
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 an attribute type value to “I”.
<!DOCTYPE html>
<html>
<head>
<title>
HTML list with Roman numbers
</title>
</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:
list with roman number indexing in HTML Example Output
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.
<!DOCTYPE html>
<html>
<head>
<title>
HTML List with LowerCase
Roman Numbers
</title>
</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:
HTML list with Roman numbers Example Output