Menu
Lists in HTML
Program 1: Ordered List with type, start, and reversed
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Attributes</title>
</head>
<body>
<h1>Programming Languages Ranking</h1>
<h2>Default Ordered List</h2>
<ol>
<li>Python</li>
<li>JavaScript</li>
<li>Java</li>
<li>PHP</li>
</ol>
<h2>Uppercase Alphabet List</h2>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap</li>
<li>React</li>
</ol>
<h2>Lowercase Alphabet List</h2>
<ol type="a">
<li>Windows</li>
<li>Linux</li>
<li>macOS</li>
</ol>
<h2>Roman Number List</h2>
<ol type="I">
<li>Requirement Analysis</li>
<li>Design</li>
<li>Development</li>
<li>Testing</li>
</ol>
<h2>List Starting from 10</h2>
<ol start="10">
<li>Aman</li>
<li>Ravi</li>
<li>Neha</li>
</ol>
<h2>Reverse Ordered List</h2>
<ol reversed>
<li>Gold Medal</li>
<li>Silver Medal</li>
<li>Bronze Medal</li>
</ol>
</body>
</html>
Program 2: Unordered List with Different Bullet Types
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Types</title>
</head>
<body>
<h1>Computer Accessories</h1>
<h2>Default Disc Bullets</h2>
<ul>
<li>Keyboard</li>
<li>Mouse</li>
<li>Monitor</li>
</ul>
<h2>Circle Bullets</h2>
<ul type="circle">
<li>Printer</li>
<li>Scanner</li>
<li>Speaker</li>
</ul>
<h2>Square Bullets</h2>
<ul type="square">
<li>RAM</li>
<li>Hard Disk</li>
<li>SSD</li>
</ul>
<h2>Nested Unordered List</h2>
<ul>
<li>Frontend
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul type="square">
<li>PHP</li>
<li>Node.js</li>
</ul>
</li>
</ul>
</body>
</html>
Program 3: Description List Example
<!DOCTYPE html>
<html>
<head>
<title>Description List</title>
</head>
<body>
<h1>Web Development Technologies</h1>
<dl>
<dt><b>HTML</b></dt>
<dd>
HTML stands for HyperText Markup Language.
It is used to create the structure of web pages.
</dd>
<dt><b>CSS</b></dt>
<dd>
CSS stands for Cascading Style Sheets.
It is used for styling web pages.
</dd>
<dt><b>JavaScript</b></dt>
<dd>
JavaScript is a scripting language used to add interactivity.
</dd>
<dt><b>PHP</b></dt>
<dd>
PHP is a server-side scripting language used for backend development.
</dd>
</dl>
</body>
</html>
Program 4: Nested Ordered and Unordered Lists
<!DOCTYPE html>
<html>
<head>
<title>Nested Lists</title>
</head>
<body>
<h1>Full Stack Development Course</h1>
<ol type="I">
<li>Frontend Technologies
<ul type="square">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ul>
</li>
<li>Backend Technologies
<ul type="circle">
<li>PHP</li>
<li>Python</li>
<li>Node.js</li>
</ul>
</li>
<li>Database
<ol type="a">
<li>MySQL</li>
<li>MongoDB</li>
</ol>
</li>
</ol>
</body>
</html>
Program 5: Multi-Level Nested List
<!DOCTYPE html>
<html>
<head>
<title>Multi-Level Nested List</title>
</head>
<body>
<h1>College Structure</h1>
<ol>
<li>Science Department
<ol type="A">
<li>Physics
<ul type="square">
<li>Quantum Physics</li>
<li>Mechanics</li>
</ul>
</li>
<li>Chemistry
<ul type="circle">
<li>Organic Chemistry</li>
<li>Inorganic Chemistry</li>
</ul>
</li>
</ol>
</li>
<li>Computer Department
<ol type="a">
<li>Web Development</li>
<li>Data Science</li>
<li>Cyber Security</li>
</ol>
</li>
</ol>
</body>
</html>
Program 6: HTML List with Styling
<!DOCTYPE html>
<html>
<head>
<title>Styled Lists</title>
<style>
ol{
background-color: lightyellow;
padding: 20px;
}
ul{
background-color: lightblue;
padding: 20px;
}
li{
margin: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Programming Courses</h1>
<ol type="I">
<li>Web Development</li>
<li>Graphic Designing</li>
<li>Python Programming</li>
</ol>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Program 7: Mixed List Example
<!DOCTYPE html>
<html>
<head>
<title>Mixed Lists</title>
</head>
<body>
<h1>Shopping Categories</h1>
<ul>
<li>Electronics
<ol type="1">
<li>Mobile</li>
<li>Laptop</li>
<li>Tablet</li>
</ol>
</li>
<li>Clothing
<ol type="A">
<li>Men Wear</li>
<li>Women Wear</li>
</ol>
</li>
<li>Groceries
<ol type="a">
<li>Rice</li>
<li>Wheat</li>
<li>Sugar</li>
</ol>
</li>
</ul>
</body>
</html>
Program 8: Ordered List with All Numbering Types
<!DOCTYPE html>
<html>
<head>
<title>All Ordered List Types</title>
</head>
<body>
<h1>Different Ordered List Numbering</h1>
<ol type="1">
<li>HTML</li>
<li>CSS</li>
</ol>
<ol type="A">
<li>JavaScript</li>
<li>Bootstrap</li>
</ol>
<ol type="a">
<li>PHP</li>
<li>Laravel</li>
</ol>
<ol type="I">
<li>MySQL</li>
<li>MongoDB</li>
</ol>
<ol type="i">
<li>Python</li>
<li>Django</li>
</ol>
</body>
</html>
Program 9: Practical School Timetable Using Lists
<!DOCTYPE html>
<html>
<head>
<title>School Timetable</title>
</head>
<body>
<h1>Weekly Timetable</h1>
<ol>
<li>Monday
<ul type="square">
<li>English</li>
<li>Maths</li>
<li>Science</li>
</ul>
</li>
<li>Tuesday
<ul type="circle">
<li>Computer</li>
<li>GK</li>
<li>Sports</li>
</ul>
</li>
<li>Wednesday
<ul>
<li>Hindi</li>
<li>Art</li>
<li>Music</li>
</ul>
</li>
</ol>
</body>
</html>
Program 10: Complete HTML List Demonstration
<!DOCTYPE html>
<html>
<head>
<title>Complete List Demonstration</title>
</head>
<body>
<h1>HTML Lists Demonstration</h1>
<h2>Ordered List</h2>
<ol type="I" start="5">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h2>Reverse Ordered List</h2>
<ol reversed type="A">
<li>Gold</li>
<li>Silver</li>
<li>Bronze</li>
</ol>
<h2>Unordered List</h2>
<ul type="square">
<li>Monitor</li>
<li>Keyboard</li>
<li>Mouse</li>
</ul>
<h2>Description List</h2>
<dl>
<dt><b>CPU</b></dt>
<dd>
CPU is the brain of the computer.
</dd>
<dt><b>RAM</b></dt>
<dd>
RAM stores temporary memory data.
</dd>
</dl>
<h2>Nested List</h2>
<ul>
<li>Frontend
<ol type="a">
<li>HTML</li>
<li>CSS</li>
</ol>
</li>
<li>Backend
<ol type="i">
<li>PHP</li>
<li>MySQL</li>
</ol>
</li>
</ul>
</body>
</html>