HTML Lists Tutorial - Ordered, Unordered, Nested Lists

HTML provides three types of lists for organizing content: ordered, unordered, and description lists.

Ordered List <ol>

Items are numbered automatically. Use when sequence matters - steps, rankings, instructions.

Ordered List

<!-- Default: 1, 2, 3 -->
<ol>
    <li>Install Node.js</li>
    <li>Install Angular CLI</li>
    <li>Create a new project</li>
</ol>

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

<!-- Roman numerals: I, II, III -->
<ol type="I">
    <li>Chapter One</li>
    <li>Chapter Two</li>
</ol>

<!-- Start from a specific number -->
<ol start="5">
    <li>Item 5</li>
    <li>Item 6</li>
</ol>

Unordered List <ul>

Items are marked with bullets. Use when order doesn't matter - features, ingredients, navigation menus.

Unordered List

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

<!-- Nested list -->
<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

Description List <dl>

A list of terms and their descriptions. Uses <dt> (term) and <dd> (description).

Description List

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - structures web content.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - styles web content.</dd>

    <dt>JavaScript</dt>
    <dd>A scripting language that makes web pages interactive.</dd>
</dl>

Key Takeaways

Use ul for unordered lists (bullets), ol for ordered lists (numbers), and dl for definition lists.
Lists can be nested - place a ul or ol inside an li element.
Use CSS list-style-type to change bullet style: disc, circle, square, decimal, lower-alpha, etc.
list-style: none removes bullets - commonly used for navigation menus.
The ol start attribute sets the starting number; reversed reverses the count.
Use role='list' on ul/ol when list-style: none is applied for better screen reader support.