Lists

Creating ordered, unordered, and description lists

Lists

HTML provides three types of lists for organizing content.

Unordered Lists

Use <ul> for items where order doesn't matter:

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

Ordered Lists

Use <ol> when the sequence matters:

<ol>
    <li>Preheat the oven to 350°F</li>
    <li>Mix the dry ingredients</li>
    <li>Add wet ingredients</li>
    <li>Bake for 25 minutes</li>
</ol>
HTML

Custom Numbering

<!-- Start from a different number -->
<ol start="5">
    <li>Item five</li>
    <li>Item six</li>
</ol>

<!-- Reverse order -->
<ol reversed>
    <li>Third place</li>
    <li>Second place</li>
    <li>First place</li>
</ol>
HTML

Nested Lists

Lists can be nested inside other 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>
            <li>Node.js</li>
        </ul>
    </li>
</ul>
HTML

Description Lists

Use <dl> for term-definition pairs:

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

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - the presentation and styling</dd>

    <dt>JavaScript</dt>
    <dd>A programming language for interactive web features</dd>
</dl>
HTML

When to Use Each Type

List Type Use When
<ul> Items have no specific order (navigation, features, ingredients)
<ol> Order matters (instructions, rankings, steps)
<dl> Pairing terms with definitions (glossaries, FAQs, metadata)