HTML Lists

Introduction to HTML Lists

Lists are used to organize content in a structured way.

HTML provides three types of lists:

1. Ordered List (<ol>) – Items with numbers or letters
2. Unordered List (<ul>) – Items with bullets
3. Description List (<dl>) – Items with terms and descriptions

Lists are widely used for menus, steps, definitions, or any grouped content.

1️⃣ Ordered List (<ol>)

An ordered list displays items in a sequence with numbers or letters.

Syntax:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Example:

<ol>
    <li>HTML Basics</li>
    <li>CSS Styling</li>
    <li>JavaScript Fundamentals</li>
</ol>

You can change numbering style using the type attribute:

type Resulting numbers

type="1" 1, 2, 3…

type="A" A, B, C…

type="a" a, b, c…

type="I" I, II, III…

type="i" i, ii, iii…

Example:

<ol type="A">
    <li>Option A</li>
    <li>Option B</li>
</ol>

2️⃣ Unordered List (<ul>)

An unordered list displays items with bullets.

Syntax:

<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

You can style bullets using CSS:

ul {
    list-style-type: disc; /* disc, circle, square, none */
}

Example:

<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

3️⃣ Description List (<dl>)

A description list is used to define terms and descriptions.

Syntax:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language, used to create web pages.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets, used to style web pages.</dd>
</dl>

• <dt> → Definition Term
• <dd> → Definition Description

Nested Lists

Lists can be nested inside each other for sub-items.

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

Best Practices

• Use ordered lists for steps or sequences
• Use unordered lists for simple grouping
• Use description lists for definitions or glossary
• Avoid too many nested lists—keep it simple for readability

Practice Code Example

Create a webpage demonstrating:

• Ordered list of steps
• Unordered list of technologies
• Description list of terms
• Nested list