HTML Lists (Ordered,Unordered,Description)


What Are HTML Lists?

In HTML, lists are used to group related items. There are three types of lists:

  • Ordered List (<ol>) - numbered items
  • Unordered List (<ul>) - bulleted items
  • Description List (<dl>) - terms and descriptions (like a glossary)

1. Ordered List (<ol>)

An ordered list uses numbers or letters to display list items in a specific sequence.

Syntax:

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Eat breakfast</li>
</ol>

2. Unordered List (<ul>)

An unordered list uses bullets instead of numbers.

Syntax:

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

3. Description List (<dl>)

A description list is used to define terms and their descriptions - perfect for glossaries, FAQs, etc.

Syntax:

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating webpages.</dd>
  <dt>CSS</dt>
  <dd>A style sheet language for styling HTML content.</dd>
</dl>

Summary Table

List Type Tag Output Style Use Case
Ordered List <ol> Numbered Steps, rankings, instructions
Unordered List <ul> Bulleted Categories, items, menus
Description List <dl> Term + Detail Glossaries, FAQs, definitions

Best Practices

  • Use <ol> when the order matters (like steps in a recipe)
  • Use <ul> when the order doesn't matter (like shopping lists)
  • Use <dl> for structured definitions and FAQs
  • Use CSS to style lists for better design (e.g., custom bullets)

Example Using All Three Lists Together

<h2>Morning Routine</h2>
<ol>
  <li>Wake up</li>
  <li>Shower</li>
  <li>Eat breakfast</li>
</ol>

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<h2>Web Terms</h2>
<dl>
  <dt>HTML</dt>
  <dd>Structure of a webpage</dd>
  <dt>CSS</dt>
  <dd>Style of a webpage</dd>
</dl>