HTML Lists

Lists are essential in HTML for organizing information. Whether you're showing bullet points, step-by-step instructions, or definitions, HTML provides flexible list structures that help with both layout and accessibility.

1. Unordered Lists: <ul>

Unordered lists use bullets to group items that don’t need a specific order, great for grocery lists, feature checklists, and menus.


<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

Each list item is wrapped in a <li> tag inside the <ul>.

2. Ordered Lists: <ol>

When the order matters, use an ordered list. This is perfect for recipes, instructions, or rankings.


<ol>
  <li>Turn on the oven</li>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

3. Nesting Lists

You can place a list inside another list to show hierarchy or subcategories. This is called nesting.


<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

This structure is handy when building multilevel menus or category trees.

4. Description Lists: <dl>

Description lists are made for pairs, like terms and their definitions. They use:

<dt> for the term (definition title)
<dd> for the description (definition detail)


<dl>
  <dt>HTML</dt>
  <dd>A markup language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>A stylesheet language used for styling HTML pages.</dd>
</dl>

5. Styling Lists with CSS

HTML lists are styled by default, but you can customize how they look using CSS or utility classes like Tailwind:


<ul class="list-disc pl-6">
  <li>This uses bullet points</li>
</ul>

<ol class="list-decimal pl-6">
  <li>This uses numbers</li>
</ol>

6. Accessibility Tip

Use proper HTML list tags, not divs or spans pretending to be lists. Screen readers rely on correct semantics to navigate content effectively.

🧠 Why Lists Matter

They improve readability by breaking content into chunks.
They help with layout, especially for menus, features, and content hierarchies.
They enhance accessibility and SEO when used properly.

7. Real-World Use Case


<h1>My To-Do List</h1>
<ul>
  <li>Learn HTML</li>
  <li>Practice daily</li>
  <li>Build a project</li>
</ul>

✅ Summary

You’ve now mastered the core list types in HTML:

<ul> – for unordered lists (bullets)
<ol> – for ordered lists (steps, ranking)
<dl> – for description lists (terms + definitions)
Nesting for subcategories

Next up: Let's Explore Links and Images, and then add a connection between multiple pages of Our websites

Lessons

Lesson 3: HTML Lists