HTML Lists

What are HTML Lists?

HTML Lists allow you to group related items in an organized manner. Lists make content easier to read and navigate.

• Ordered List (<ol>) – Numbered items
• Unordered List (<ul>) – Bulleted items
• Description List (<dl>) – Term and description pairs

Ordered Lists

Ordered lists display items in a specific sequence, usually numbered.

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

                

Unordered Lists

Unordered lists display items with bullets, without a specific order.

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

                

Description Lists

Description lists pair terms with descriptions, often used in definitions or FAQs.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

                

Nested Lists

You can create lists inside lists to show hierarchy or sub-items.

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrot</li>
            <li>Broccoli</li>
        </ul>
    </li>
</ul>

                

Best Practices for Lists

• Use lists for related content, not just for styling
• Use <ol> for sequences and steps
• Use <ul> for general groupings
• Use <dl> for terms and definitions
• Keep nested lists readable and indented properly