HTML Lists Tutorial Ordered, Unordered and Description Lists

HTML Lists

In HTML, lists are used to display items in a sequence. They are super handy when you want to organize content like steps, features, groceries or anything in a structured format.

HTML provides three types of lists.

1. Ordered List ( <ol> )

This type shows items in a numbered format (1, 2, 3...). Used when order matters, like steps in a process.

Example:

<ol>
    <li>Boil water</li>
    <li>Add tea leaves</li>
    <li>Stir and serve</li>
</ol>

Output:

2. Unordered List ( <ul> )

Displays items with bullet points. Used when the order does not matter, like a list of fruits.

Example:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

Output:

3. Description List ( <dl> )

Used to defines terms and descriptions, like a glossary.

Example:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Output:

Example: Simple List

<!DOCTYPE html>
<html>

<head>
    <title>List Example</title>
</head>

<body>
    <h3>Animal List</h3>
    <ul>
        <li>Cat</li>
        <li>Dog</li>
        <li>Cow</li>
    </ul>
</body>

</html>

Output:

Styled Lists Example

You can customize how your list looks using CSS, like changing the bullet type, color spacing etc.

Example: HTML+CSS

<!DOCTYPE html>
<html>

<head>
    <title>Styled List</title>
    <style>
        ul.custom-list {
            list-style-type: square;
            color: blue;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <h3>Styled Unordered List</h3>
    <ul class="custom-list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>

</html>

Output:

Nested List Example

Nesting lets you create sub-lists inside your main list, great for hierarchical data.

Example:

<!DOCTYPE html>
<html>

<head>
    <title>Nested List</title>
</head>

<body>
    <h3>Nested Unordered List</h3>
    <ul>
        <li>Frontend
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>Backend
            <ul>
                <li>Java</li>
                <li>Python</li>
                <li>JavaScript</li>
            </ul>
        </li>
    </ul>
</body>

</html>

Output:

Here, you see a main list with two items ('Frontend' and 'Backend') each containing its own sublist.

Tips

Use <li> only inside <ul> or <ol> tags.
Always keep your lists structured for better readability.
You can style lists using CSS to customize bullet types, numbering or spacing.