HTML Lists

HTML Lists

HTML lists are used to group related items in a structured way. There are three main types of lists in HTML:

  1. Unordered List (<ul>)

  2. Ordered List (<ol>)

  3. Description List (<dl>)

1. Unordered List (<ul>)

An unordered list displays items with bullets.

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

Change Bullet Style

<ul style="list-style-type:square;">
<li>Apple</li>
<li>Banana</li>
</ul>

Common styles: disc (default), circle, square, none

2. Ordered List (<ol>)

An ordered list displays items in a numbered order.

<ol>
<li>Wake up</li>
<li>Study</li>
<li>Practice</li>
</ol>

Change Number Type

<ol type="A">
<li>First</li>
<li>Second</li>
</ol>

Types:

  • 1 → Numbers

  • A → Uppercase letters

  • a → Lowercase letters

  • I → Roman (uppercase)

  • i → Roman (lowercase)

3. Description List (<dl>)

A description list is used for terms and definitions.

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

  • <dt> → Term

  • <dd> → Description

4. Nested Lists (List Inside List)

<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>

5. Horizontal List (Using CSS)

<ul style="list-style:none; display:flex; gap:15px;">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>

Used commonly for navigation menus.

Comparison Table

List Type Tag Use Case
Unordered <ul> Bullet points
Ordered <ol> Steps / ranking
Description <dl> Definitions

Best Practices ✅

✔ Use <ul> for menus
✔ Use <ol> for steps or sequences
✔ Use <dl> for definitions
❌ Don’t use lists only for spacing (use CSS)

You may also like...