Lists in HTML

HTML provides three main types of lists: Ordered, Unordered, and Definition lists. You can also nest lists (put one list inside another).

---

🔹 Ordered Lists (<ol>)

• Used when the order matters (like steps, rankings, or sequences).
• Each item is written inside an <li> (list item) tag.
• By default, numbers (1, 2, 3, …) are used.
• You can change the numbering style using the type attribute (1, A, a, I, i).

✅ Example:

<h3>Steps to Make Tea</h3>
<ol type="A">
  <li>Boil water</li>
  <li>Add tea leaves</li>
  <li>Add sugar and milk</li>
  <li>Strain and serve</li>
</ol>

Output: A. Boil water B. Add tea leaves C. Add sugar and milk D. Strain and serve

---

🔹 Unordered Lists (<ul>)

• Used when the order does not matter (like a shopping list).
• Items appear with bullets by default.
• The type attribute can change the bullet style (disc, circle, square).

✅ Example:

<h3>Grocery List</h3>
<ul type="square">
  <li>Bread</li>
  <li>Butter</li>
  <li>Milk</li>
  <li>Eggs</li>
</ul>

Output: ▪ Bread ▪ Butter ▪ Milk ▪ Eggs

---

🔹 Definition Lists (<dl>, <dt>, <dd>)

• Used for definitions, terms, or name–value pairs.
• <dl> → Definition List container
• <dt> → Definition Term (word/concept)
• <dd> → Definition Description (meaning/explanation)

✅ Example:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, used to create web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets, used for designing web pages.</dd>
</dl>

Output: HTML → HyperText Markup Language, used to create web pages.

CSS → Cascading Style Sheets, used for designing web pages.

---

🔹 Nesting Lists

• You can place one list inside another (useful for subcategories).
• A nested list must be inside an <li> item.

✅ Example:

<h3>Subjects</h3>
<ul>
  <li>
    Science
    <ol>
      <li>Physics</li>
      <li>Chemistry</li>
      <li>Biology</li>
    </ol>
  </li>
  <li>Mathematics</li>
  <li>English</li>
</ul>

Output:

• Science

  1. Physics
  2. Chemistry
  3. Biology

• Mathematics

• English

---

✅ Key Points for Exams:

• <ol> → Ordered list (numbered/lettered).
• <ul> → Unordered list (bulleted).
• <dl> → Definition list.
• Lists can be nested for hierarchy.