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

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>