Nearby lessons
11 of 24📋 HTML Lists
📌 What are HTML Lists?
HTML offers different types of lists for organizing content.
📋 Types of Lists
- 🔸 Unordered List (
<ul>) – Items with bullet points - 🔸 Ordered List (
<ol>) – Items with numbers or letters - 🔸 Definition List (
<dl>) – Terms and their descriptions
🔹 Unordered List (<code><ul></code>)
Unordered lists display bullet points. Each item is placed inside a
<li> (list item) tag.| Attribute | Description |
|---|---|
type: disc | ● Filled circle (default) |
type: circle | ○ Hollow circle |
type: square | ■ Solid square |
Code Example
PREVIEW READY
🔹 Ordered List (<code><ol></code>)
Ordered lists show items with numbers or letters. You can change the style using the
type attribute and start from any number using start.| Attribute | Description |
|---|---|
type="1" | 1, 2, 3 (default) |
type="A" | A, B, C (uppercase letters) |
type="a" | a, b, c (lowercase letters) |
type="I" | I, II, III (uppercase Roman numerals) |
type="i" | i, ii, iii (lowercase Roman numerals) |
start="5" | Start the list from number 5 |
Code Example
PREVIEW READY
🔹 Definition List (<code><dl></code>)
Definition lists consist of a term and its description. Use
<dt> for the term and <dd> for the definition.| Attribute | Description |
|---|---|
<dt> | Defines the term |
<dd> | Defines the meaning of the term |
Code Example
PREVIEW READY
🔹 Nested Lists
You can create lists inside list items to show sub-items or categories. This works with both ordered and unordered lists.
Code Example
PREVIEW READY
💡 List Best Practices
- ✅ Use the correct list type based on your content
- ✅ Keep list items short and clear
- ✅ Use semantic tags, not lists for spacing
- ✅ Use CSS for styling, avoid outdated attributes
- ✅ For deep nesting, keep it limited to 2–3 levels
- ✅ Make lists accessible for screen readers
🧠 Test Your Knowledge
5 QuestionsProgress: 0 / 5
Keep Going!HTML Images