Lesson 8: HTML Lists
What are HTML Lists?
HTML lists allow web developers to group related items together. There are three types of lists in HTML: unordered lists, ordered lists, and description lists.
Types of Lists:
- Unordered Lists - Use bullets (•)
- Ordered Lists - Use numbers or letters
- Description Lists - Terms with descriptions
Unordered Lists (<ul>)
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. List items are marked with bullets.
HTML Code:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered Lists (<ol>)
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. List items are marked with numbers by default.
HTML Code:
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
Output:
- First step
- Second step
- Third step
Ordered List Types
You can change the numbering style using the type attribute:
HTML Code:
<ol type="A">
<li>Item A</li>
<li>Item B</li>
</ol>
<ol type="i">
<li>Item i</li>
<li>Item ii</li>
</ol>
Output:
- Item A
- Item B
- Item i
- Item ii
| Type Value |
Description |
Example |
| type="1" |
Numbers (default) |
1, 2, 3... |
| type="A" |
Uppercase letters |
A, B, C... |
| type="a" |
Lowercase letters |
a, b, c... |
| type="I" |
Uppercase Roman numerals |
I, II, III... |
| type="i" |
Lowercase Roman numerals |
i, ii, iii... |
Starting Number
Use the start attribute to begin counting from a specific number:
HTML Code:
<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
</ol>
Output:
- Fifth item
- Sixth item
- Seventh item
Nested Lists
Lists can be nested inside other lists to create sublists:
HTML Code:
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
Description Lists (<dl>)
Description lists are used to display terms and their descriptions:
HTML Code:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Output:
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
Description List Tags:
- <dl> - Defines the description list
- <dt> - Defines a term (name)
- <dd> - Defines the description of the term
Practical Example: Recipe
HTML Code:
<h3>Pancake Recipe</h3>
<h4>Ingredients:</h4>
<ul>
<li>2 cups flour</li>
<li>2 eggs</li>
<li>1 cup milk</li>
</ul>
<h4>Instructions:</h4>
<ol>
<li>Mix ingredients</li>
<li>Heat pan</li>
<li>Cook pancakes</li>
</ol>
Output:
Pancake Recipe
Ingredients:
- 2 cups flour
- 2 eggs
- 1 cup milk
Instructions:
- Mix ingredients
- Heat pan
- Cook pancakes
💡 Best Practices:
- Use unordered lists when the order doesn't matter
- Use ordered lists for sequential steps or rankings
- Keep list items concise and parallel in structure
- Don't use lists just for indentation - use CSS instead
- Always close your <li> tags
Styling Lists with CSS
You can customize list appearance using CSS:
<ul style="list-style-type: square;">
<li>Square bullets</li>
</ul>
<ul style="list-style-type: none;">
<li>No bullets</li>
</ul>
Practice Exercise
Try This:
Create a page about your school with:
- An unordered list of school facilities
- An ordered list of class periods/schedule
- A nested list showing subjects and their topics
- A description list of teachers and their subjects