In this HTML tutorial, we will discuss the HTML list. HTML lists are a part of web development and are used to display records.
There are three types of lists in HTML, so let's look at them one by one.
Unordered Lists (<ul>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tutorial</title>
</head>
<body>
<ul>
<li>Name: Jhon Deo</li>
<li>Experience: 2.2 years in Laravel</li>
<li>Skills: jQuery, Bootstrap, Ajax, Laravel</li>
<li>Location: New York, United State</li>
<li>Education: Bachelor's in Computer Science, Certification in Web Development</li>
<li>Projects: Online Shopping Portal, Inventory Management System, Blogging Platform </li>
<li>Interests: Web Development, Learning New Technologies, Reading Tech Blogs</li>
</ul>
</body>
</html>
Ordered Lists (<ol>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tutorial</title>
<style>
body{
background: aliceblue;
}
</style>
</head>
<body>
<ol>
<li>Name: John Doe</li>
<li>Experience: 3 years in Full Stack Development</li>
<li>Skills: React, Node.js, SQL</li>
<li>Location: New York, USA</li>
<li>Education: Bachelor's in Computer Science, Master's in Software Engineering</li>
<li>Projects: E-commerce Website, Real-time Chat Application, Content Management System</li>
<li>Interests: Coding, Open Source Contribution, Reading Tech Books</li>
</ol>
<ol type="A">
<li>Name: Jane Smith</li>
<li>Experience: 5 years in UI/UX Design</li>
<li>Skills: Adobe XD, Sketch, HTML & CSS</li>
<li>Location: San Francisco, USA</li>
<li>Education: Bachelor's in Graphic Design, Certification in Human-Computer Interaction</li>
<li>Projects: Mobile App Design, Website Redesign, User Experience Research</li>
<li>Interests: Design Thinking, Photography, Traveling</li>
</ol>
</body>
</html>
Definition Lists (<dl>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tutorial</title>
<style>
body{
background: aliceblue;
}
</style>
</head>
<body>
<dl>
<dt>Name</dt>
<dd>John Doe</dd>
<dt>Experience</dt>
<dd>3 years in Full Stack Development</dd>
<dt>Skills</dt>
<dd>React, Node.js, SQL, HTML, CSS, JavaScript</dd>
<dt>Location</dt>
<dd>New York, USA</dd>
<dt>Education</dt>
<dd>Bachelor's in Computer Science, Master's in Software Engineering</dd>
<dt>Projects</dt>
<dd>E-commerce Website, Real-time Chat Application, Content Management System</dd>
<dt>Interests</dt>
<dd>Coding, Reading Tech Books, Open Source Contribution</dd>
</dl>
<dl>
<dt>Name</dt>
<dd>Jane Smith</dd>
<dt>Experience</dt>
<dd>5 years in UI/UX Design</dd>
<dt>Skills</dt>
<dd>Adobe XD, Sketch, HTML & CSS</dd>
<dt>Location</dt>
<dd>San Francisco, USA</dd>
<dt>Education</dt>
<dd>Bachelor's in Graphic Design, Certification in Human-Computer Interaction</dd>
<dt>Projects</dt>
<dd>Mobile App Design, Website Redesign, User Experience Research</dd>
<dt>Interests</dt>
<dd>Design Thinking, Photography, Traveling</dd>
</dl>
</body>
</html>
Nested Order List
We nested the order list we allowed so we could create the list in the list, We can create the same work with a definition list and an unordered list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tutorial</title>
<style>
body{
background: aliceblue;
}
</style>
</head>
<body>
<ol>
<li>Project Overview
<ol>
<li>Objective</li>
<li>Scope</li>
<li>Timeline
<ol>
<li>Phase 1: Research</li>
<li>Phase 2: Design</li>
<li>Phase 3: Development
<ol>
<li>Frontend</li>
<li>Backend</li>
<li>Testing</li>
</ol>
</li>
<li>Phase 4: Deployment</li>
</ol>
</li>
<li>Team Members
<ol>
<li>Project Manager</li>
<li>Lead Developer</li>
<li>UI/UX Designer
<ol>
<li>Design Lead</li>
<li>Junior Designer</li>
</ol>
</li>
<li>Quality Assurance</li>
</ol>
</li>
</ol>
</li>
<li>Budget
<ol>
<li>Initial Costs</li>
<li>Operational Costs</li>
<li>Contingency Fund</li>
</ol>
</li>
<li>Milestones
<ol>
<li>Kickoff Meeting</li>
<li>Completion of Design Phase</li>
<li>Alpha Release</li>
<li>Beta Testing</li>
<li>Final Release</li>
</ol>
</li>
</ol>
</body>
</html>
