List And Types
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo - Lists in HTML</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.demo-box {
border: 2px solid #4a90e2;
padding: 12px;
margin-bottom: 25px;
background: #eef6ff;
}
</style>
</head>
<body>
<h1>Demo: Ordered, Unordered, Definition & Nested Lists</h1>
<hr>
<h2>1. Ordered List (ol)</h2>
<div class="demo-box">
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</div>
<h2>2. Unordered List (ul)</h2>
<div class="demo-box">
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</div>
<h2>3. Definition List (dl, dt, dd)</h2>
<div class="demo-box">
<dl>
<dt>HTML</dt>
<dd>The structure of a webpage.</dd>
<dt>CSS</dt>
<dd>The styling of a webpage.</dd>
<dt>JavaScript</dt>
<dd>The programming logic of a webpage.</dd>
</dl>
</div>
<h2>4. Nested Lists</h2>
<div class="demo-box">
<ul>
<li>Frontend
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Go</li>
<li>.NET</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo - Lists in HTML</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.demo-box {
border: 2px solid #4a90e2;
padding: 12px;
margin-bottom: 25px;
background: #eef6ff;
}
</style>
</head>
<body>
<h1>Demo: Ordered, Unordered, Definition & Nested Lists</h1>
<hr>
<h2>1. Ordered List (ol)</h2>
<div class="demo-box">
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</div>
<h2>2. Unordered List (ul)</h2>
<div class="demo-box">
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</div>
<h2>3. Definition List (dl, dt, dd)</h2>
<div class="demo-box">
<dl>
<dt>HTML</dt>
<dd>The structure of a webpage.</dd>
<dt>CSS</dt>
<dd>The styling of a webpage.</dd>
<dt>JavaScript</dt>
<dd>The programming logic of a webpage.</dd>
</dl>
</div>
<h2>4. Nested Lists</h2>
<div class="demo-box">
<ul>
<li>Frontend
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Go</li>
<li>.NET</li>
</ul>
</li>
</ul>
</div>
</body>
</html>