Lists in HTML

Unordered Lists

Unordered lists use bullet points. They are created with <ul> and <li>:

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

Use unordered lists when the order of items doesn’t matter.

Ordered Lists

Ordered lists use numbers. They are created with <ol> and <li>:

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Eat breakfast</li>
</ol>
      

Use ordered lists when the order of items matters.

Nested Lists

You can place lists inside other lists:

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Grapes</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>
      

Nested lists are useful for categories and sub‑categories.

Lesson Checkpoint

Before moving on, make sure you have:

1. Created unordered and ordered lists in your index.html file.
2. Experimented with nested lists.
3. Committed your changes to GitHub.
4. Viewed your updated site on GitHub Pages.

Use the navigation bar to continue to the next lesson.