HTML Lists

Unordered lists are used when the order of items does not matter. Each item in the list is marked with a bullet point by default.

An unordered list is created using the <ul> element, and each list item is defined using the <li> element.

Example:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
 </ul>

How this works

• <ul> wraps the entire list
• <li> represents each individual list item
• The browser automatically adds bullet markers

Unordered lists are commonly used for:

• Navigation menus
• Feature lists
• Grouped content without sequence

Ordered lists are used when the order of items is important. By default, items are numbered automatically by the browser.

Ordered lists are created using the <ol> element, with <li> elements defining each item.

Example:

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

In this example, we have an ordered list with three items. When rendered, each item will be displayed with a number indicating its order.

Key points

• <ol> creates the ordered list
• The browser assigns numbers automatically
• The numbering updates automatically if items are added or removed

Ordered lists are ideal for:

• Step-by-step instructions
• Rankings
• Procedures or workflows

HTML allows you to place a list inside another list to create hierarchical structures. This is called a nested list and is commonly used for menus or multi-level content.

A nested list is created by placing a new <ul> or <ol> inside a list item (<li>).

Example:

<ul>
    <li>List item 1</li>
    <li>List item 2
       <ul>
          <li>Subitem 1</li>
          <li>Subitem 2</li>
       </ul>
    </li>
    <li>List item 3</li>
 </ul>

What’s happening here

• The second list item contains another <ul>
• The nested list is indented automatically
• This visually represents a parent–child relationship

Nested lists are useful for:

• Multi-level navigation
• Categories and subcategories
• Structured outlines

Definition lists are used to display a list of terms along with their definitions. They are not as common as unordered (<ul>) and ordered (<ol>) lists but serve a specific purpose.

Understanding the Tags:

• <dl>: The Definition List element. This is the container that holds the list of terms and descriptions.
• <dt>: The Definition Term element. This is used to indicate the term being defined.
• <dd>: The Definition Description element. This is used to provide the definition or description for the term.

Example:

<dl>
    <dt>HTML</dt>
    <dd>HTML is the standard markup language for Web pages. With HTML you can create your own Website.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a HTML document</dd>
    <dt>JavaScript</dt>
    <dd>JavaScript often abbreviated as JS, is a programming language and core technology of the World Wide Web</dd>
</dl>

In this example, we have a definition list with three definition terms and three definition descriptions.

Definition lists in HTML are a specialized tool for a specific type of content. Knowing how to use them enhances your web pages' readability and structure. Practice creating and styling your own definition lists to understand their functionality and application better.

When to use definition lists

• Glossaries
• Term–definition content
• Metadata-like information

Using the correct list type improves both readability and semantic structure.

HTML lists can be styled using CSS to change their appearance. You can customize:

• List markers (bullets or numbers)
• Spacing and indentation
• Alignment and layout

Example CSS:

ul {
    list-style-type: square;
    margin-left: 20px;
 }

ol {
   list-style-type: upper-roman;
   margin-left: 30px;
}

In this CSS example, we've set the list-style-type property to "square" for unordered lists (<ul>) and "upper-roman" for ordered lists (<ol>). We've also adjusted the left margin to create indentation.

What this does

• Changes bullet points to squares for unordered lists
• Uses Roman numerals for ordered lists
• Adjusts indentation using margins

You’ll explore list styling in much more depth when you learn CSS, but this example shows how easily lists can be customized.

HTML lists are a powerful way to organize content and improve readability. By choosing the correct list type — unordered, ordered, nested, or definition lists — you can present information in a way that makes sense to users and browsers alike.

Understanding lists also prepares you for more advanced topics such as navigation menus, layout structures, and responsive design.

In the next lesson, you’ll learn about HTML tables, which allow you to present data in rows and columns.

This lesson is part of our complete Learn HTML guide.