<ul> & <ol> — List Elements

Basic Syntax

<!-- Unordered list -->
<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

<!-- Ordered list -->
<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

Unordered List <ul>

Use when the order of items doesn't matter. Renders as bullet points by default.

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

Common uses:

• Feature lists on a landing page
• Navigation menus (with CSS list-style: none)
• Ingredients, tags, categories
• Bullet point lists in articles

Ordered List <ol>

Use when the sequence of items matters. Renders as numbered steps.

<ol>
    <li>Install Node.js</li>
    <li>Run npm install</li>
    <li>Start the dev server</li>
</ol>

Advanced usage with type, start, and reversed:

<!-- Start from 5 -->
<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
</ol>

<!-- Uppercase letters -->
<ol type="A">
    <li>Option A</li>
    <li>Option B</li>
</ol>

<!-- Roman numerals, reversed -->
<ol type="I" reversed>
    <li>Countdown 3</li>
    <li>Countdown 2</li>
    <li>Countdown 1</li>
</ol>

Nested Lists

Place a nested <ul> or <ol> inside an <li> to create a sublist.

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>Node.js</li>
            <li>Python</li>
            <li>PostgreSQL</li>
        </ul>
    </li>
</ul>

This renders with increasing indentation for each level. Use it for outlines, file trees, and multi-level navigation.

Description List <dl>

Term-definition pairs. Use it for glossaries, FAQs, and metadata.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language. The structure of the web.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets. Styling and layout.</dd>

    <dt>JavaScript</dt>
    <dd>The programming language of the web.</dd>
</dl>

You can also have multiple <dd> elements per <dt>:

<dl>
    <dt>Coffee</dt>
    <dd>Hot beverage made from roasted beans.</dd>
    <dd>Also a programming term: "Java" is not "JavaScript".</dd>
</dl>

Styling Lists

Common CSS patterns for lists.

/* Remove bullets (great for navigation menus) */
ul.no-bullets {
    list-style: none;
    padding: 0;
}

/* Custom bullet with an emoji or icon */
ul.custom li::before {
    content: "→ ";
    color: #3b82f6;
    font-weight: 700;
}

/* Horizontal nav from a ul */
nav ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
}

/* Remove default padding from lists */
ul, ol {
    padding-left: 1.25rem;
}

/* Space out list items */
li {
    margin-bottom: 0.5rem;
}