Lists Unpacked

Creating ordered, unordered, and definition lists

Lists are one of the most useful ways to organise content in HTML. The three types: unordered (<ul>), ordered (<ol>), and definition lists (<dl>).

The unordered list: <ul>

An unordered list uses the <ul> tag. Use it when the order of items does not matter. Each item is wrapped in an <li> (list item) tag.

Example:

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

By default, browsers show bullet points. Good for features, services, or any group of items where sequence is irrelevant.

The ordered list: <ol>

When order matters – a recipe, a set of steps, a ranked list – use an ordered list with the <ol> tag. The browser numbers items automatically.

Example:

<ol>
    <li>Start your computer</li>
    <li>Open your web browser</li>
    <li>Visit a website</li>
</ol>

The browser numbers these 1, 2, 3, and so on. Handy for long lists or when you add and remove items – the numbering updates itself.

Nesting lists

You can put lists inside list items to create sub-lists. Useful for categories and subcategories.

Example:

<ul>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Oranges</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrots</li>
            <li>Broccoli</li>
        </ul>
    </li>
</ul>

The definition list: <dl>

A definition list pairs terms with descriptions – a bit like a dictionary. Use <dt> for the term and <dd> for its description, both inside a <dl>.

Example:

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Definition lists suit glossaries, Q&A sections, or anywhere you need a term paired with an explanation.

Styling lists with CSS

Plain HTML lists are functional but plain. CSS lets you change markers, spacing, and layout.

Custom list markers

Change the bullet style on unordered lists:

ul {
    list-style-type: square;
}

Change the numbering style on ordered lists:

ol {
    list-style-type: upper-roman;
}

Removing default styles

Strip the default markers for a cleaner look:

ul, ol {
    list-style: none;
}

li {
    padding: 5px;
    margin-left: 20px;
}

Styling definition lists

Make definition lists easier to scan:

dt {
    font-weight: bold;
}

dd {
    margin-left: 20px;
}

Accessibility considerations

Screen readers use list structure to convey how content is organised. Properly nested lists help users navigate and understand your page.

Try it yourself

Build pages using all three list types. Nest them, style them, and see what works for your content. Lists are straightforward once you know which type to reach for.