📋 HTML Lists

Learn how to organize content using unordered, ordered, and nested lists

📚 List Tags Overview

📌 Key Concept

HTML lists are used to group related pieces of information. The most common list types are unordered lists (bullet points) using <ul> and ordered lists (numbered) using <ol>. Each item in the list is defined by the <li> (list item) tag.

List Types

Tag Name Description
<ul> Unordered List Items are marked with bullets (default). Order doesn't matter.
<ol> Ordered List Items are marked with numbers or letters. Order matters.
<li> List Item Contains the actual item data. Used inside both <ul> and <ol>.

💻 Code Examples

📝 Example 1: Unordered List

A simple list of items with bullet points:

<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>

▶️ Output:

  • Apples
  • Bananas
  • Oranges

📝 Example 2: Ordered List

A numbered list of steps:

<ol>
<li>Mix ingredients</li>
<li>Bake for 30 mins</li>
<li>Let cool</li>
</ol>

▶️ Output:

  1. Mix ingredients
  2. Bake for 30 mins
  3. Let cool

📝 Example 3: Nested Lists

Lists inside lists:

<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>

</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Potato</li>
</ul>

</li>
</ul>

▶️ Output:

  • Fruits
    • Apple
    • Mango
  • Vegetables
    • Carrot
    • Potato

📝 Example 4: Custom Styled List

Lists can be styled with CSS to remove bullets and add custom designs:

<ul style="list-style: none; padding: 0;">
<li style="background: #eef; padding: 8px; margin: 5px 0; border-left: 4px solid #667eea;"> ✓ Completed Task </li> <li style="background: #fee; padding: 8px; margin: 5px 0; border-left: 4px solid #f56565;"> ✗ Pending Task </li> </ul>

▶️ Output:

  • ✓ Completed Task
  • ✗ Pending Task

🔧 Tag Attributes

Tag Attribute Description Example
<ol> type Specifies the kind of marker (1, A, a, I, i) type="A"
<ol> start Specifies the start value of an ordered list start="5"
<ul> style Use CSS list-style-type to change bullets style="list-style-type: square;"

✍️ Practice Assignments

🎯 Assignment 1: Grocery List

Easy

Create a simple unordered list for grocery items.

  • Use <ul> tag
  • Add at least 5 items using <li>

🎯 Assignment 2: Recipe Steps

Medium

Create a recipe instruction list.

  • Use <ol> for the main steps
  • Use nested <ul> for ingredients inside a step if needed
  • Try using the type attribute to change numbering style

🎯 Assignment 3: Website Navigation

Hard

Create a multi-level navigation menu structure.

  • Create a main list of links (Home, About, Services)
  • Nest a list under "Services" with sub-services
  • Use CSS to remove bullet points (list-style: none)

🎓 Key Takeaways

  • Use <ul> for unordered (bulleted) lists
  • Use <ol> for ordered (numbered) lists
  • Use <li> for list items
  • Lists can be nested inside other lists
  • List appearance can be customized with CSS or attributes