Chapter 2.1☕ 12 min read

Lists

Biryani ingredients likho — list se easy hai.

01What are Lists in HTML?

Open Paradise Biryani's menu. What do you see? A list of starters. A list of biryani types. A list of desserts. Everything on that menu is organized as a list.

HTML lists do the same thing for web pages. Organize related items together — ingredients, steps, features, navigation. Without lists, your page is a wall of text. With lists, it's structured and scannable.

📋

Menu Analogy: A restaurant without a list-based menu is like a webpage without lists — everything thrown together randomly. Lists bring order. Order brings readability. Readability brings users.

02Three Types of Lists in HTML

There are three types of lists in HTML:

<ol> — Ordered List — Numbered. Sequence matters. Like bus route stops — 1, 2, 3 in fixed order.
<ul> — Unordered List — Bullet points. Order doesn't matter. Like a menu — starters, mains, desserts in any order.
<dl> — Description List — Term + description pairs. Like a dictionary or railway timetable — key on left, value on right.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Paradise Biryani Recipe</title>
  </head>
  <body>
    <h1>Paradise Biryani Recipe</h1>

    <h2>Ingredients</h2>
    <ul>
      <li>Basmati rice — 500g</li>
      <li>Mutton — 750g</li>
      <li>Onions — 500g (thinly sliced)</li>
      <li>Yogurt — 200g</li>
      <li>Saffron — 1 pinch</li>
      <li>Ghee — 100g</li>
    </ul>

    <h2>Cooking Steps</h2>
    <ol>
      <li>Wash and soak basmati rice for 30 minutes</li>
      <li>Marinate mutton with yogurt and spices overnight</li>
      <li>Layer ingredients in handi:
        <ul>
          <li>Bottom: ghee + onions</li>
          <li>Middle: marinated mutton</li>
          <li>Top: soaked rice + saffron milk</li>
        </ul>
      </li>
      <li>Seal handi with dough</li>
      <li>Cook on low flame for 40 minutes</li>
    </ol>

    <h2>Recipe Info</h2>
    <dl>
      <dt>Course</dt>
      <dd>Main Course</dd>
      <dt>Prep Time</dt>
      <dd>1 hour (plus overnight marination)</dd>
      <dt>Cook Time</dt>
      <dd>40 minutes</dd>
      <dt>Servings</dt>
      <dd>4-5 people</dd>
      <dt>Difficulty</dt>
      <dd>Intermediate — needs practice</dd>
    </dl>
  </body>
</html>

<ol>Ordered list — numbered items

<ul>Unordered list — bullet items

<dl>Description list — term + description pairs

<li>List item — each point in ol and ul

<dt> + <dd>Term + description (used in dl)

03Types of List Concepts

Just like Hyderabad has different types of lists — railway timetables, restaurant menus, bus routes, area hierarchies — HTML lists have different approaches for different needs.

Concept What it does

🔢 Ordered List ol with type, start, reversed attributes Learn → • Unordered List ul with list-style-type options Learn → 📋 Description List dl with dt/dd for term-definition pairs Learn → 📦 Nested Lists Lists inside list items — multi-level data Learn → 🎨 List CSS Styling list-style, ::before, custom markers Learn →

04How Lists Work — Flow

Choose list typeol for ordered, ul for unordered, dl for descriptions

→

Add list itemsWrap each item in li (or dt/dd for description lists)

→

Browser rendersAutomatic numbers, bullets, or indentation

Pro tip: Lists are not just for displaying items — they're semantic HTML. Screen readers announce "list with 5 items" which gives context. A bunch of divs with text doesn't get this treatment. Use real lists, not fake ones.

05Exercise — Paradise Biryani Recipe List

Build a recipe page using all three list types for Paradise Biryani — ingredients (ul), cooking steps (ol), and recipe info (dl).

Open VS Code. Create a new file — name it paradise-recipe.html

Use the starter code below and build the full recipe:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Paradise Biryani Recipe</title>
  </head>
  <body>
    <!-- ul: 6 ingredients -->
    <!-- ol: 5 steps (step 3 has nested ul) -->
    <!-- dl: recipe metadata -->

  </body>
</html>

Complete these:

One <ul> with 6 biryani ingredients One <ol> with 5 cooking steps Inside step 3, add a nested <ul> with 3 sub-steps One <dl> with recipe metadata (course, time, servings, difficulty)

💡

Real challenge: Try adding type="A" to the ordered list so steps show as A, B, C instead of 1, 2, 3.

Done — Key Points:

✅ <ol> = ordered list (numbered, sequence matters)
✅ <ul> = unordered list (bullets, order doesn't matter)
✅ <dl> = description list (term + description pairs)
✅ Lists are semantic HTML — screen readers announce them
✅ Lists can be nested — list inside a list

Previous1.5 — Images 📋 All Chapters Next Chapter2.2 — Tables →