HTML Lists

Written by RedoHub Team · Last updated: July 31, 2026

HTML provides three types of lists to organize and display information in a structured way. Lists are one of the most commonly used elements in web pages.

Types of HTML Lists

List Type	Tag	Use When
Unordered List	`<ul>`	Order doesn't matter (bullet points)
Ordered List	`<ol>`	Order matters (numbered steps)
Description List	`<dl>`	Term and definition pairs (like a glossary)

Unordered List

An unordered list displays items with bullet points. Use the <ul> tag, and wrap each item in an <li> tag:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Result:

HTML
CSS
JavaScript

Ordered List

An ordered list displays items with numbers or letters. Use the <ol> tag:

<ol>
    <li>Open your text editor</li>
    <li>Write your HTML code</li>
    <li>Save the file as .php</li>
    <li>Open it in a browser</li>
</ol>

Result:

Open your text editor
Write your HTML code
Save the file as .php
Open it in a browser

Description List

A description list is used for term-definition pairs. It uses three tags:

<dl> — the description list container
<dt> — the term (definition term)
<dd> — the description (definition data)

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language — the structure of web pages</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets — controls the visual style of pages</dd>
</dl>

Nested Lists

You can place a list inside another list to create nested (multi-level) lists:

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

Best Practice: Use <ul> for navigation menus — most navigation bars are built on unordered lists styled with CSS to look like buttons or tabs.

Common Mistakes to Avoid

Putting content directly inside <ul>. A <ul> or <ol> can only directly contain <li> elements — text or other tags placed straight inside them is invalid and renders unpredictably.

Using <ol> when order doesn't matter. If reordering the items wouldn't change the meaning (like a list of features), use <ul> — numbers imply sequence, and misusing them confuses screen-reader users.

Mismatched nested tags. When nesting a <ul> inside an <li>, make sure the inner list's closing </ul> comes before the outer </li> — a swapped order breaks the indentation of everything after it.

Try It: A Recipe with Steps and Ingredients

Combining an ordered list (steps, order matters) with a nested unordered list (ingredients, order doesn't matter) inside one step:

<ol>
    <li>Gather your ingredients:
        <ul>
            <li>2 slices of bread</li>
            <li>1 slice of cheese</li>
            <li>1 tbsp butter</li>
        </ul>
    </li>
    <li>Butter the bread</li>
    <li>Grill for 2 minutes per side</li>
</ol>

Rendered result:

Gather your ingredients:
- 2 slices of bread
- 1 slice of cheese
- 1 tbsp butter
Butter the bread
Grill for 2 minutes per side

Frequently Asked Questions

Q: Can I put a list inside a table cell?

A: Yes — a <ul> or <ol> works fine inside a <td>, just like any other block content.

Q: Which list type is best for a navigation menu?

A: <ul>. Navigation order is rarely meaningful to the reader, and it's the long-standing convention that CSS frameworks (including Bootstrap's navbar) are built around.

Q: Do list items need to always be text?

A: No — an <li> can contain images, links, forms, or entire nested lists. See the MDN <li> reference for the full content rules.

« Previous Lesson Next Lesson »