Web · HTML Document Structure
Lists
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to HTML Lists
Lists are a fundamental way to organize information in HTML. There are three main types of lists:
- Unordered lists (bulleted)
- Ordered lists (numbered)
- Definition lists (term and description pairs)
Let's start with the unordered list UL (
<ul>
). This creates a bulleted list where each item starts with a bullet point. Each list item is defined with the
<li>
tag.
<!DOCTYPE html>
<html>
<body>
<h2>Starter Codémons</h2>
<ul>
<li>Aquachu</li>
<li>Pyrochu</li>
<li>Florachu</li>
</ul>
</body>
</html>
Important List Rules
Always remember that list items (
<li>
) must be inside a list container (
<ul>
,
<ol>
, or
<dl>
). Never use list items on their own without a parent list element.
Exercise 2 — Ordered Lists
Ordered lists (
<ol>
) create numbered lists where items appear in a specific sequence.
Like unordered lists, each item is defined with the
<li>
tag.
<!DOCTYPE html>
<html>
<body>
<h2>How to Train Your Codémon</h2>
<ol>
<li>Choose your starter Codémon</li>
<li>Learn basic commands</li>
<li>Earn badges</li>
</ol>
</body>
</html>
Notice how the browser automatically numbers each item in sequence. You don't need to add the numbers yourself!
Exercise 3 — Choosing the Right List Type
Which type of HTML list would be most appropriate for displaying a recipe's step-by-step cooking instructions?
Options
• ```<ol>```
• ```<ul>```
• ```<dl>```
• ```<li>```
Hint : Think about whether the sequence of items matters. Would we use an ordered list or an unordered list?
Exercise 4 — Definition Lists
Definition lists (
<dl>
) are used to display term-description pairs. They're perfect for glossaries, dictionaries, or any content with terms and their explanations.
A definition list uses three elements:
-
<dl>
- The container for the list
-
<dt>
- Definition term (the word being defined)
-
<dd>
- Definition description (the explanation)
<!DOCTYPE html>
<html>
<body>
<h2>Codémon Types Glossary</h2>
<dl>
<dt>Water</dt>
<dd>Strong against fire types. Weak against plant types.</dd>
<dt>Fire</dt>
<dd>Strong against plant types. Weak against water types.</dd>
<dt>Plant</dt>
<dd>Strong against water types. Weak against fire types.</dd>
</dl>
</body>
</html>
Multiple Descriptions
You can have multiple
<dd>
elements for a single
<dt>
term if you need to provide multiple descriptions for one term.
Exercise 5 — Match List Elements with Their Purpose
Match each HTML list element with its correct purpose:
Items to match
• <ul>
• <ol>
• <li>
• <dl>
Definitions
• Creates a bulleted list
• Creates a numbered list
• Defines a list item
• Creates a definition list
Exercise 6 — Choosing the Right List Type
Which type of HTML list would be most appropriate for a glossary of Codémon terminology with terms and their definitions?
Options
• ```<dl>```
• ```<ul>```
• ```<ol>```
• ```<li>```
Hint : Think about which list type is specifically designed to handle pairs of related information, like terms and their definitions.
Exercise 7 — Complete the List Structure
Complete the HTML code to create an unordered list of Codémon types.
<!DOCTYPE html>
<html>
<body>
<h2>Types of Codémon</h2>
____
____Fire - Hot and powerful____
____Water - Cool and refreshing____
____Plant - Natural and healing____
____
</body>
</html>
Options: <ul> </ul> <ol> </ol> <li> </li> <li> </li> <li> </li> <li> </li>
Hint : Remember the proper structure: a list container (ul or ol) with li elements inside it for each list item.
Exercise 8 — List Types and Their Uses
Match each list type with its most appropriate use case:
Items to match
• <ul>
• <ol>
• <dl>
• <li>
Definitions
• A list of Codémon types
• Top 5 strongest Codémons
• Codémon glossary with terms and explanations
• Individual Codémon in a list
Exercise 9 — Creating a Definition List
Complete the HTML code to create a definition list for Codémon abilities.
<!DOCTYPE html>
<html>
<body>
<h2>Codémon Abilities</h2>
____
____Water Blast____
____A powerful water attack that deals high damage to fire opponents.____
____
</body>
</html>
Options: <dl> </dl> <dt> </dt> <dd> </dd> <ul> </ul>
Hint : Remember the structure: <dl> contains term-description pairs, where each term is in <dt> and each description is in <dd>.
Exercise 10 — List Best Practices
Which of the following is NOT a valid way to use HTML lists?
Options
• <li>First item</li>
<li>Second item</li>
<li>Third item</li>
• <ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
• <ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
• <dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
Hint : Think about the required parent-child relationships between list elements. Can list items exist on their own?