Introduction to HTML Lists
Lists are used to organize content in a structured way.
HTML provides three types of lists:
- Ordered List (
<ol>) – Items with numbers or letters - Unordered List (
<ul>) – Items with bullets - Description List (
<dl>) – Items with terms and descriptions
Lists are widely used for menus, steps, definitions, or any grouped content.
1️⃣ Ordered List (<ol>)
An ordered list displays items in a sequence with numbers or letters.
Syntax:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Example:
<ol>
<li>HTML Basics</li>
<li>CSS Styling</li>
<li>JavaScript Fundamentals</li>
</ol>
You can change numbering style using the type attribute:
type Resulting numbers
type="1" 1, 2, 3…
type="A" A, B, C…
type="a" a, b, c…
type="I" I, II, III…
type="i" i, ii, iii…
Example:
<ol type="A">
<li>Option A</li>
<li>Option B</li>
</ol>
2️⃣ Unordered List (<ul>)
An unordered list displays items with bullets.
Syntax:
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
You can style bullets using CSS:
ul {
list-style-type: disc; /* disc, circle, square, none */
}
Example:
<ul style="list-style-type: square;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
3️⃣ Description List (<dl>)
A description list is used to define terms and descriptions.
Syntax:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used to create web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style web pages.</dd>
</dl>
<dt>→ Definition Term<dd>→ Definition Description
Nested Lists
Lists can be nested inside each other for sub-items.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>PHP</li>
</ul>
</li>
</ul>
Best Practices
- Use ordered lists for steps or sequences
- Use unordered lists for simple grouping
- Use description lists for definitions or glossary
- Avoid too many nested lists—keep it simple for readability
Practice Code Example
Create a webpage demonstrating:
- Ordered list of steps
- Unordered list of technologies
- Description list of terms
- Nested list
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Lists Practice</title>
<style>
ul, ol {
margin: 10px 0;
padding-left: 20px;
}
dl dt {
font-weight: bold;
}
dl dd {
margin-left: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>HTML Lists Example</h1>
<h2>Ordered List (Steps)</h2>
<ol type="1">
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn JavaScript</li>
</ol>
<h2>Unordered List (Technologies)</h2>
<ul style="list-style-type: square;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Description List (Definitions)</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Programming language for web interactivity</dd>
</dl>
<h2>Nested List</h2>
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>PHP</li>
</ul>
</li>
</ul>
</body>
</html>