HTML

How to Create Lists in HTML: Ordered, Unordered, and Description Lists

HTML has three kinds of lists: ordered, unordered and description lists. Here's how each one works and when you should use it.

RazakTerra
Reading time
2 min read
Comments
Discussion
How to Create Lists in HTML: Ordered, Unordered, and Description Lists
On this page
  1. Unordered List <ul>
  2. Ordered List <ol>
  3. Description List <dl>
  4. Nested Lists
  5. Full Example
  6. Quick Tips

Unordered List <ul>

Use this when the order of items doesn’t matter (like a shopping list or features list).

Playground
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
Result
Cmd/Ctrl + Enter runs it · Esc leaves the editor

The browser will usually show bullet points by default.

Ordered List <ol>

Use this when the order is important (steps, rankings, instructions).

Playground
<ol>
  <li>Open the editor</li>
  <li>Write your code</li>
  <li>Save the file</li>
</ol>
Result
Cmd/Ctrl + Enter runs it · Esc leaves the editor

You can also change the numbering style with the type attribute:

Playground
<ol type="A">
  <li>First item</li>
  <li>Second item</li>
</ol>
Result
Cmd/Ctrl + Enter runs it · Esc leaves the editor

Common values: 1 (numbers), A (uppercase letters), a (lowercase), I (Roman numerals).

Description List <dl>

Use this for terms and their descriptions (like a glossary or product details).

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

  <dt>CSS</dt>
  <dd>A language used to style HTML elements.</dd>
</dl>
Result
Cmd/Ctrl + Enter runs it · Esc leaves the editor
  • <dt> = the term
  • <dd> = the description

Nested Lists

You can put a list inside another list:

Playground
<ul>
  <li>
    Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>
Result
Cmd/Ctrl + Enter runs it · Esc leaves the editor

This works with both <ul> and <ol>. When to Use Each List

List Type Best Used For Example
Unordered <ul> Items where order doesn’t matter Features, ingredients
Ordered <ol> Steps, rankings,sequences Tutorials, top 10 list
Description <dl> Terms + explanations Glosarry, definitions

Full Example

Playground
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML Lists</title>
  </head>
  <body>
    <h1>Learning Web Development</h1>

    <h2>Topics to Learn</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>

    <h2>Learning Steps</h2>
    <ol>
      <li>Learn the basics of HTML</li>
      <li>Practice building simple pages</li>
      <li>Move on to CSS</li>
    </ol>

    <h2>Key Terms</h2>
    <dl>
      <dt>Tag</dt>
      <dd>The basic building block of HTML.</dd>
      <dt>Element</dt>
      <dd>A complete HTML structure with opening and closing tags.</dd>
    </dl>
  </body>
</html>
Result
Cmd/Ctrl + Enter runs it · Esc leaves the editor

Quick Tips

  • Always use <li> inside <ul> or <ol>.
  • Don’t use lists just for spacing or layout, that’s what CSS is for.
  • Nested lists are great for showing hierarchy.
  • Choose the list type based on meaning, not just appearance.

Using the right type of list makes your content clearer and more meaningful for both users and search engines.

Written by

Razak

Writes about the web, slowly, and builds small tools on the side.

Support me on Ko-fiAbout me

Discussion

Comments

Loading comments…

Keep reading

Read next