HTML Lists

HTML Lists: Unordered, Ordered, and Description Lists

HTML lists group related items cleanly for both visual scanning and assistive navigation. Screen readers announce list item counts right away, letting visitors know how many links or steps a section contains.

The Three Types of HTML Lists

1. Unordered Lists (ul): Display bulleted items where sequence does not matter, such as feature checklists or navigation menus.
2. Ordered Lists (ol): Display numbered or lettered steps where order matters, such as installation instructions or recipes.
3. Description Lists (dl): Pair terms (dt) with their definitions (dd), ideal for glossaries or key-value metadata.

Inside ul and ol, every direct child must be an li element. To create a nested sublist, place the inner ul or ol inside an existing li, never directly inside the outer ul.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Lists Example</title>
</head>
<body>
    <h3>Deployment Steps</h3>
    <ol>
        <li>Install dependencies</li>
        <li>Build assets
            <ul>
                <li>Compile TypeScript</li>
                <li>Minify CSS bundle</li>
            </ul>
        </li>
        <li>Restart web worker</li>
    </ol>

    <h3>Protocol Glossary</h3>
    <dl>
        <dt>HTTP</dt>
        <dd>Protocol used to transfer web pages between servers and browsers.</dd>
        <dt>DOM</dt>
        <dd>Tree representation of HTML elements in browser memory.</dd>
    </dl>
</body>
</html>

Customizing Ordered Lists

You can customize ol numbering with start="5" to resume counting from five, reversed to count downward, or type="A" for uppercase letters. Strip default bullets in CSS navigation menus using list-style: none;.

Common Mistakes to Avoid

• Placing div or h3 directly inside ul: Only li elements (or script/template) belong as direct children of ul or ol.
• Nesting a sublist outside an li: Put child ul tags inside the parent li element, not between two li elements.
• Faking bullets with hyphen text: Never type - Item inside p tags; semantic ul lists give cleaner spacing and accessibility.

Frequently Asked Questions

When should I use ul vs ol?

Use ol when item sequence matters, like step-by-step guides or rankings, and ul when items can appear in any order.

Are navigation bars normally built with ul lists?

Yes. Wrapping navigation links in a ul inside a nav element is a widespread semantic pattern styled horizontally with CSS Flexbox.