HTML Lists – A Complete Guide with Examples & Best Practices

What are HTML Lists?

HTML lists are used to group related items together. There are three main types of lists:
✔ Ordered List (<ol>) – Displays items in a numbered sequence.
✔ Unordered List (<ul>) – Displays items with bullet points.
✔ Definition List (<dl>) – Defines terms and their descriptions.

Ordered List (ol)

An ordered list displays items in a specific order, using numbers (1, 2, 3, …).

✅ Syntax:

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

✅ Output:

  1. First item
  2. Second item
  3. Third item

Customizing Ordered Lists

You can change the number style using the type attribute:

✔ Roman numerals:

<ol type="I">
    <li>First item</li>
    <li>Second item</li>
</ol>

✅ Output:
I. First item
II. Second item

✔ Lowercase letters:

<ol type="a">
    <li>Item A</li>
    <li>Item B</li>
</ol>

✅ Output:
a. Item A
b. Item B

Unordered List (ul)

An unordered list displays items with bullets (•) instead of numbers.

✅ Syntax:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

✅ Output:

  • Apple
  • Banana
  • Cherry

Customizing Bullet Style

You can change the bullet style using the type attribute:

✔ Square bullets:

<ul type="square">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

✅ Output:
▪ Item 1
▪ Item 2

✔ Circle bullets:

<ul type="circle">
    <li>Item A</li>
    <li>Item B</li>
</ul>

✅ Output:
○ Item A
○ Item B

Definition List (dl)

A definition list is used for presenting terms and their descriptions.

✅ Syntax:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

✅ Output:
HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Nesting Lists (Lists Inside Lists)

You can nest lists inside each other to create multi-level lists.

✅ Example:

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

✅ Output:

  • Fruits
    • Apple
    • Banana
  • Vegetables
    • Carrot
    • Broccoli

Best Practices for Using HTML Lists

✔ Use ordered lists (<ol>) for sequential steps.
✔ Use unordered lists (<ul>) for general lists.
✔ Use definition lists (<dl>) for term-description pairs.
✔ Keep lists short and meaningful for better readability.
✔ Use CSS for styling lists instead of outdated attributes.