Ordered and Unordered Lists
1. Introduction
Lists are one of the most used structures on the web — navigation menus, feature bullet points, step-by-step instructions, and breadcrumbs are all built with HTML lists. HTML provides three types: unordered lists for collections without sequence, ordered lists for sequential steps, and description lists for term-definition pairs. This lesson covers all three in full detail.
2. Concept
Choosing the Right List Type
| List Type | Element | Use When |
|---|---|---|
| Unordered | <ul> |
Order does not matter (features, ingredients) |
| Ordered | <ol> |
Sequence matters (steps, rankings, procedures) |
| Description | <dl> |
Term-definition pairs (glossary, metadata) |
<ul> and <ol> is <li>. You cannot place a <p> directly inside a list — but you can place one inside an <li>.list-style-type property or use list-style: none and add custom icons via ::before pseudo-elements for pixel-perfect designs.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lists Demo</title>
</head>
<body>
<!-- Unordered list -->
<h2>Ingredients</h2>
<ul>
<li>2 cups flour</li>
<li>1 cup sugar</li>
<li>3 eggs</li>
<li>100g butter</li>
</ul>
<!-- Ordered list -->
<h2>Instructions</h2>
<ol>
<li>Preheat oven to 180°C.</li>
<li>Mix dry ingredients together.</li>
<li>Add wet ingredients and stir until smooth.</li>
<li>Pour into tin and bake for 25 minutes.</li>
</ol>
<!-- Nested list -->
<h2>Nested Menu</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>
<!-- Description list -->
<h2>Glossary</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the visual presentation.</dd>
</dl>
</body>
</html>
4. How It Works
Step 1 — Unordered List Structure
The <ul> element wraps all items. Each item is a <li>. Browsers render a bullet by default. The list type conveys to screen readers that these items have no inherent order.
Step 2 — Ordered List and Its Attributes
<ol> renders numbered items. You can control numbering with start="5" (begin at 5), type="A" (uppercase letters), or reversed (count down).
Step 3 — Nested Lists
A nested list is placed inside a parent <li>, not after it. The parent <li> contains both the text label and the nested <ul> or <ol>.
Step 4 — Description List Elements
<dt> (description term) and <dd> (description details) always appear as children of <dl>. Multiple <dd> elements can follow a single <dt>.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node.js Setup Guide</title>
</head>
<body>
<h1>Node.js Project Setup Guide</h1>
<h2>Prerequisites</h2>
<ul>
<li>Node.js 18 or higher installed</li>
<li>npm or yarn package manager</li>
<li>A code editor (VS Code recommended)</li>
<li>Basic knowledge of the terminal</li>
</ul>
<h2>Installation Steps</h2>
<ol>
<li>
<strong>Clone the repository</strong>
<ul>
<li>HTTPS: <code>git clone https://github.com/user/repo.git</code></li>
<li>SSH: <code>git clone git@github.com:user/repo.git</code></li>
</ul>
</li>
<li><strong>Navigate into the directory:</strong> <code>cd repo</code></li>
<li><strong>Install dependencies:</strong> <code>npm install</code></li>
<li><strong>Copy environment file:</strong> <code>cp .env.example .env</code></li>
<li><strong>Start the dev server:</strong> <code>npm run dev</code></li>
</ol>
<h2>Available Scripts</h2>
<dl>
<dt><code>npm run dev</code></dt>
<dd>Starts the development server with hot reload on port 3000.</dd>
<dt><code>npm run build</code></dt>
<dd>Compiles the app for production into the dist folder.</dd>
<dt><code>npm test</code></dt>
<dd>Runs the test suite with Vitest.</dd>
</dl>
</body>
</html>
6. Common Mistakes
❌ Placing non-li elements directly inside ul/ol
<ul>
<p>This is wrong</p>
<li>Item 1</li>
</ul>✓ Only <li> as direct children of <ul>/<ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>❌ Nested list placed after the parent li, not inside it
<ul>
<li>Frontend</li>
<ul><li>HTML</li></ul>
</ul>✓ Nested list goes inside the parent li
<ul>
<li>Frontend
<ul><li>HTML</li></ul>
</li>
</ul>7. Try It Yourself
8. Quick Reference
| Element | Purpose | Key Attributes |
|---|---|---|
<ul> |
Unordered list | None needed |
<ol> |
Ordered list | start, type, reversed |
<li> |
List item | value (ol only) |
<dl> |
Description list | None needed |
<dt> |
Description term | None needed |
<dd> |
Description details | None needed |