Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create list with roman number indexing in HTML
Overview
Indexing are the numbers which indicate the points or a position of a sentence. In HTML, we can do indexing in two ways: Unordered List (ul) and Ordered List (li). To make a list with a roman number in HTML we use the <ul> tag, the roman number is the number which is written in sequence so we use ordered list instead of unordered list. To make the ordered list with a roman number we should define the type of ordered list, that is the indexing in the list should be ‘a’, ’A’, ’I’ or ‘i’. So to make a roman number we define the type of ordered list as ‘I’ and ‘i’.
Syntax
For the roman number indexing in HTML we use following syntax −
<ol type=""> <li></li> <li></li> </ol>
ol − It is the ordered list which is the parent container of the list.
type − The type attribute is defined to set the type of the indexing of the list.
li − It is the list which contains the data which is to be inserted in the list. The list tag <li> is the child of the order list <ol> tag.
Approach
As the roman numbers are defined as I, II, III, IV or i, ii, iii, iv. So we will use two examples to learn how we can make the list by defining the type of the ordered list as ‘I’ or ‘i’.
Algorithm
Step 1 − Create a HTML boilerplate in your text editor.
Step 2 − Create a parent container as <ol> and define its type as ‘i’.
<ol type="i"></ol>
Step 3 − Create the child of ordered list as li.
<li></li>
Step 4 − Insert the data in it.
<li>Frontend Articles</li> <li>Backend Articles</li> <li>UI/UX Articles</li>
Step 5 − Roman number indexing is ready.
Example
In this example we had discussed building the roman number list. We had defined the type of ordered list as “i”(Small i).
<html>
<head>
<title>Roman number indexing as i</title>
</head>
<body>
<h1> Points to remember ol type= “i” </h1>
<ol type="i">
<li>Frontend Articles</li>
<li>Backend Articles</li>
<li>UI/UX Articles</li>
</ol>
</body>
</html>
The given below image shows the output of the example in which we had set the type of ordered list “small i”, so the bullets or indexing in the below points are as i, ii, iii.
Algorithm
Step 1 − Create a HTML boilerplate in your text editor
Step 2 − Create a parent container as <ol> and define its type as ‘I’.
<ol type="I"></ol>
Step 3 − Create the child of the ordered list as li.
<li></li>
Step 4 − Insert the data in it.
<li>Frontend Articles</li> <li>Backend Articles</li> <li>UI/UX Articles</li>
Step 5 − Roman number indexing is ready.
Example
In this example we had discussed building the roman number list. We had defined the type of ordered list as “I”(Capital I).
<html>
<head>
<title>Roman number indexing as I</title>
</head>
<body>
<h1>Points to remember <ol type= “I”></h1>
<ol type="I">
<li>Frontend Articles</li>
<li>Backend Articles</li>
<li>UI/UX Articles</li>
</ol>
</body>
</html>
The below images shows the output of the following example 2, in which the type of the ordered list is set as “Capital I”, the numbering in roman are as follows I, II, III.
Conclusion
In the ordered list there are many types of list which we can set in our list. The list can be set in numerical order, alphabetical order and roman numbers which we have used in the above example. The ordered list provides a systematic representation of the data which enhances the user experience and makes the set of data understandable.
4K+ Views
