ol: This tag is used to start making an ordered list
ul: This tag is used to start making an unordered list
li: This tag is used to create the list of items
Following is the hierarchy required for the tags:
- ul / ol declared first and is used to create an unordered or an ordered list inside the body
- li is declared inside the ul / ol tag inside the body
- li can also be declared inside the li tag to create an nested list inside the body
Code
<!doctype html>
<html lang="en">
<head>
<title>Practical 5 - CSU953 LAB 4 - CSE 2026</title>
</head>
<body>
<div class="row">
<div class="col">
<img src="https://shooliniuniversity.com/assets/images/logo.png" style="width:100px;
height:50px;">
</div>
<div class="col" style="margin-left: -20%;">
<h1 style="font-size: 50px;">Practical 5</h1>
</div>
</div>
<h3>
Using list to create the extended shoolini family:
</h3>
<ol>
<li>Chancellor: P. K Khosla
<ul>
<li>Vice Chancellor: Atul Khosla
<ul>
<li>Department Dean: Ashish Khosla
<ul>
<li>Dr. Pankaj Vaidya
<ol>
<li>Dr. Bharti Thakur</li>
<li>Dr. Rabinder Thakur</li>
<li>Rammah Youssef</li>
<li>Abdullahi Adem</li>
<li>All Students</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
</body>
</html>
Output
Practical 5
Using list tag for creating the extended shoolini family:
- Chancellor: P. K Khosla
- Vice Chancellor: Atul Khosla
- Department Dean: Ashish Khosla
- Dr. Pankaj Vaidya
- Dr. Bharti Thakur
- Dr. Rabinder Thakur
- Rammah Youssef
- Abdullahi Adem
- All Students
- Dr. Pankaj Vaidya
- Department Dean: Ashish Khosla
- Vice Chancellor: Atul Khosla