Lists (Overview)

By the end of this lesson, you will be able to identify and correctly implement unordered, ordered, and description lists in HTML to structure content logically.

What it is

HTML provides three distinct list types to organize collections of items. The choice depends on whether the order matters, if the items are related pairs, or if they are simply a group of equal-weight items.

• Unordered List (<ul>): A collection where the sequence does not matter (e.g., bullet points).
• Ordered List (<ol>): A collection where the sequence is significant (e.g., steps, rankings).
• Description List (<dl>): A collection of terms and their associated descriptions (e.g., glossaries, metadata).

Each list item within <ul> or <ol> uses the <li> tag. Description lists use <dt> for terms and <dd> for definitions.

Why it matters

• Semantic Meaning: Screen readers announce list structures, helping users with disabilities understand relationships between items.
• SEO Benefits: Search engines better understand content hierarchy when proper list tags are used.
• Styling Efficiency: CSS can target specific list types easily, reducing the need for complex class names.
• Readability: Breaking text into lists makes dense information easier to scan for human readers.

Syntax or steps

1. Choose the appropriate wrapper tag: <ul>, <ol>, or <dl>.
2. Add child elements inside the wrapper:
   • For <ul> and <ol>, use <li>.
   • For <dl>, alternate <dt> (term) and <dd> (description).
3. Ensure all opening tags have corresponding closing tags.

Example

<!DOCTYPE html>
<html>
<body>

  <h3>Shopping List (Unordered)</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Milk</li>
  </ul>

  <h3>Recipe Steps (Ordered)</h3>
  <ol>
    <li>Preheat oven to 350°F.</li>
    <li>Mix flour and sugar.</li>
    <li>Bake for 20 minutes.</li>
  </ol>

  <h3>Glossary (Description List)</h3>
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets.</dd>
  </dl>

</body>
</html>

Explanation: The first block uses <ul> because shopping items have no inherent order. The second uses <ol> because baking steps must happen in sequence. The third uses <dl> to pair acronyms with their full definitions, creating a clear term-definition relationship.

Common mistakes

• Using <br> instead of lists: Never separate list items with line breaks. Always use <li> tags.
• Misusing <ol> for visual bullets: Do not use ordered lists just to get numbers if the order doesn't matter. Use CSS list-style-type on <ul> if you want custom markers.
• Nesting errors: Ensure nested lists are placed inside the parent <li>, not after the closing </ul> or </ol>.
• Ignoring semantics in <dl>: Do not use description lists for simple key-value data if a table would be more appropriate for tabular data.

When to use it

Practice

Guided Exercise: Create an ordered list of your morning routine (wake up, brush teeth, eat breakfast). Then, create a description list defining two programming languages.

Challenge: Nest an unordered list of "Fruits" and "Vegetables" inside an ordered list of "Grocery Store Sections".

Hint: Place the inner <ul> directly inside the relevant <li> of the outer <ol>.

Quick check

Question: Which list type should you use for a set of instructions where step 1 must happen before step 2?

Answer: An ordered list (<ol>), because the sequence carries semantic meaning.

Summary

Choosing the correct HTML list type ensures your content is accessible, semantically accurate, and easy to style. Use <ul> for unordered groups, <ol> for sequential steps, and <dl> for term-definition pairs.