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>