Introduction

HTML lists are a fundamental way to display related items in a structured format. They organize information in a clear hierarchy, making content easier to scan and understand.

HTML supports three main types of lists: unordered lists, ordered lists, and definition lists. This tutorial covers each type, nesting, CSS styling, pitfalls, and six hands-on examples.

What You’ll Learn

Types of HTML Lists

There are three main types of lists in HTML:

1. Unordered lists (<ul>) — displayed as bullet points when order does not matter.
2. Ordered lists (<ol>) — displayed with numbers or letters when sequence matters.
3. Definition lists (<dl>) — used for terms and their descriptions.

Each type serves a different purpose, but they all follow a simple structure that makes organizing content straightforward.

Unordered Lists (<ul>)

An unordered list displays items in no particular order. Each item is typically marked with a bullet point. The basic structure is:

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

By default, browsers display unordered list items with solid round bullets, but you can customize this with CSS list-style-type. See the ul tag reference for details.

Ordered Lists (<ol>)

An ordered list presents items in a specific sequence. This is useful when order matters—steps in a process, rankings, or instructions:

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

By default, items are numbered 1, 2, 3… Change the style with CSS instead of the deprecated HTML type attribute:

ol.letters {
  list-style-type: upper-alpha; /* A, B, C */
}

ol.roman {
  list-style-type: upper-roman; /* I, II, III */
}

Learn more in the ol tag reference and list-style-type CSS property.

Definition Lists (<dl>)

A definition list pairs terms with their descriptions. It is often used for glossaries or to explain concepts. A definition list consists of:

• <dt> — defines the term (definition term).
• <dd> — describes the term (definition description).

Example

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages.</dd>

  <dt>CSS</dt>
  <dd>A stylesheet language for designing the look of web pages.</dd>
</dl>

One term can have multiple dd elements if several descriptions apply. See the dl tag reference.

Nested Lists

Lists can be nested within other lists to create multi-level structures—sub-categories, outlines, or steps within steps. Place the inner list inside an li element:

<ul>
  <li>Main Item 1
    <ul>
      <li>Sub Item 1.1</li>
      <li>Sub Item 1.2</li>
    </ul>
  </li>
  <li>Main Item 2</li>
</ul>

Sub-items appear indented under the parent item. You can mix ul and ol at different levels (e.g. numbered steps with bullet sub-points).

Styling Lists

CSS customizes bullet type, numbering style, and spacing:

ul {
  list-style-type: square; /* square bullets */
}

ol {
  list-style-type: upper-roman; /* I, II, III */
}

li {
  margin-bottom: 0.25rem;
}

Remove bullets entirely for navigation-style menus:

ul.nav {
  list-style-type: none;
  padding-left: 0;
}

Common list-style-type values: disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, and none.

Common Pitfalls

• Incorrect nesting — nested lists must sit inside an li, not directly inside another ul or ol alongside sibling li elements.
• Items outside the container — every li must be inside ul or ol. Closing the tag before items breaks the list.
• Wrong list type — use ul when order is irrelevant; use ol when sequence matters (recipes, instructions).
• Manual bullets — typing “- Item” in a paragraph is not a real list. Use semantic markup for accessibility.
• Deprecated attributes — prefer CSS over the HTML type attribute on ol.

Examples Gallery

Six examples from a simple bullet list to a full page with every list type. Each includes View Output and Try It Yourself.

<h1>Shopping list</h1>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<h1>Recipe steps</h1>
<ol>
  <li>Preheat the oven to 180°C</li>
  <li>Mix the dry ingredients</li>
  <li>Bake for 25 minutes</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages.</dd>
  <dt>CSS</dt>
  <dd>A stylesheet language for designing web pages.</dd>
</dl>

<style>
  ol.alpha { list-style-type: upper-alpha; }
  ul.circle { list-style-type: circle; }
</style>
<ol class="alpha">
  <li>Item A</li>
  <li>Item B</li>
</ol>

<ul>
  <li>HTML Basics
    <ul>
      <li>Headings</li>
      <li>Paragraphs</li>
    </ul>
  </li>
  <li>CSS Basics</li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML Lists Example</title>
  <style>
    ul { list-style-type: circle; }
    ol { list-style-type: upper-alpha; }
  </style>
</head>
<body>
  <h1>HTML Lists Example</h1>
  <!-- ul, ol, nested ul, and dl sections -->
</body>
</html>

Best Practices