GNVHSGNVHSDEBUG
Home/HTML/Lists

Lists in HTML

HTML Basics•Reading time: 5 min

Lists are essential elements for structuring content on web pages. They allow you to group related items together in a clear, organized way.

In this tutorial, you'll learn about the different types of lists in HTML and how to use them effectively in your web pages.

In this tutorial

1Unordered Lists

Unordered lists (ul) are used when the order of the items doesn't matter. Each item in the list is marked with a bullet point by default.

html
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Visual Example:

  • Coffee
  • Tea
  • Milk

When to Use:

Use unordered lists for groups of related items where the sequence doesn't matter, such as shopping lists, feature lists, or navigation menus.

2Ordered Lists

Ordered lists (ol) are used when the sequence of items is important. Each item is automatically numbered.

html
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Visual Example:

  1. First step
  2. Second step
  3. Third step

Ordered List Attributes:

  • type - specifies the numbering type (1, A, a, I, i)
  • start - specifies the starting number
  • reversed - reverses the numbering

Examples:

  • <ol type="A"> - Uses uppercase letters
  • <ol start="5"> - Starts at number 5
  • <ol reversed> - Counts down instead of up

3Description Lists

Description lists (dl) are used to display name-value pairs, like terms and their definitions. Each description list contains:

  • dt - Description term
  • dd - Description details (the definition)
html
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, the standard language for creating web pages.</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, used for styling HTML elements.</dd>
  
  <dt>JavaScript</dt>
  <dd>A programming language that enables interactive web pages.</dd>
</dl>

Visual Example:

HTML
HyperText Markup Language, the standard language for creating web pages.
CSS
Cascading Style Sheets, used for styling HTML elements.
JavaScript
A programming language that enables interactive web pages.

When to Use:

Description lists are perfect for glossaries, metadata, key-value pairs, or any content that has a term and corresponding explanation.

4Nested Lists

Lists can be nested inside one another to create hierarchical structures. This is useful for outlines, navigation menus, or any content with multiple levels.

html
<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

Visual Example:

  • Fruits
    • Apples
    • Bananas
    • Oranges
  • Vegetables
    • Carrots
    • Broccoli
    • Spinach

Best Practices:

Avoid nesting lists too deeply as it can make the content harder to read. Usually, two or three levels of nesting is sufficient for most purposes.

5Try It Yourself

Create an HTML document that incorporates different types of lists to organize content effectively.

lists-example.html
Example Code
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Lists Practice</title>
</head>
<body>
  <h1>My Travel Bucket List</h1>
  
  <h2>Top Destinations</h2>
  <ol>
    <li>Japan
      <ul>
        <li>Tokyo</li>
        <li>Kyoto</li>
        <li>Osaka</li>
      </ul>
    </li>
    <li>Italy
      <ul>
        <li>Rome</li>
        <li>Florence</li>
        <li>Venice</li>
      </ul>
    </li>
    <li>New Zealand</li>
  </ol>
  
  <h2>Travel Essentials</h2>
  <ul>
    <li>Passport</li>
    <li>Phone and charger</li>
    <li>Comfortable shoes</li>
    <li>Camera</li>
  </ul>
  
  <h2>Travel Terms</h2>
  <dl>
    <dt>Layover</dt>
    <dd>A period of time between connecting flights.</dd>
    
    <dt>All-inclusive</dt>
    <dd>A vacation package that includes accommodations, meals, and activities.</dd>
    
    <dt>Red-eye</dt>
    <dd>A flight that departs at night and arrives the next morning.</dd>
  </dl>
</body>
</html>

Pro Tip

Lists are not just for displaying bullet points or numbers. They are semantic elements that help structure your content and improve accessibility. Screen readers use list markup to provide context to users, allowing them to navigate between lists, count items, and understand the relationship between nested elements.

Summary

  • ✓
    Use ul for unordered lists when the sequence doesn't matter
  • ✓
    Use ol for ordered lists when the sequence is important
  • ✓
    Use dl, dt, and dd for term-definition pairs
  • ✓
    Nest lists to create hierarchical structures, but avoid excessive nesting
Previous: Text ElementsNext: Links and Images