Lists — Organizing Items

What Are HTML Lists?

Lists group related items together. HTML supports two types: unordered lists (

) with bullet points, and ordered lists (
) with numbers. Each item inside is wrapped in
1. (list item).
   
   
   � **Analogy:** A `

   ` is like a grocery list (order doesn't matter). An `
   ` is like a recipe (step 1 must come before step 2).
   
   

   Syntax

   
   
   html

   <!-- Unordered list (bullets) -->
   <ul>
     <li>Apples</li>
     <li>Bananas</li>
     <li>Cherries</li>
   </ul>
   
   <!-- Ordered list (numbers) -->
   <ol>
     <li>Mix ingredients</li>
     <li>Bake for 30 minutes</li>
     <li>Let cool</li>
   </ol>

   
   

   Element	What it does
   `<ul>`	Unordered list — items appear with bullet points
   `<ol>`	Ordered list — items appear numbered (1, 2, 3...)
   `<li>`	A single item in the list (must be inside `<ul>` or `<ol>`)

   
   

   How It Works

   
   

   Nested Lists

   
   

   You can put lists inside lists for hierarchies:

   
   
   html

   <ul>
     <li>Fruits
       <ul>
         <li>Apples</li>
         <li>Oranges</li>
       </ul>
     </li>
     <li>Vegetables
       <ul>
         <li>Carrots</li>
         <li>Broccoli</li>
       </ul>
     </li>
   </ul>

   
   

   Renders as:

2. Fruits

- Apples

- Oranges

3. Vegetables

- Carrots

- Broccoli




List with Links



html

<ul>
  <li><a href="/home">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>



� **Key point:** `
` can contain ANY HTML — paragraphs, images, links, even other lists. Lists are incredibly flexible.



Types of Ordered Lists




Attribute	Shows	Example
`<ol>`	1, 2, 3...	Default
`<ol type="A">`	A, B, C...	Steps in a recipe
`<ol type="i">`	i, ii, iii...	Roman numerals
`<ol start="5">`	5, 6, 7...	Start from a number




Why Use Lists?



4. **Navigation menus** — `
   ` with links is the standard pattern
   • **Features/bullet points** — Product features, pros/cons
   • **Step-by-step instructions** — Recipes, tutorials, guides
   • **Tables of contents** — Linked lists of page sections
   • **Tag clouds, category lists** — Blog post metadata
   
   

   Common Mistakes

   
   

   ❌ Wrong	Why	✅ Right
   `<li>` without `<ul>` or `<ol>`	List items must be inside a list container	`<ul><li>Item</li></ul>`
   `<ul><li>Item</ul></li>`	Wrong nesting — closing tags must mirror opening	`<ul><li>Item</li></ul>`
   `<ul><p>Item</p></ul>`	Only `<li>` can be direct child of `<ul>`/`<ol>`	`<ul><li>Item</li></ul>`

   
   

   Your Turn!

   
   

   Create a page with:

   • An `

     `: "My Daily Routine"

   • An `
     ` with 3 steps for your morning routine
     1. A `
        ` with 3 items on your to-do list