HTML/CSS - 7

HTML/CSS - 7: Lists

Lists are useful when you want to group related information together. HTML gives you two main kinds of lists: ordered lists and unordered lists.

An <ol> creates an ordered list, which usually uses numbers. A <ul> creates an unordered list, which usually uses bullet points. Each item inside either list is written with an <li> tag.

Lists can also be placed inside other lists. This is called nesting, and it is useful when one item needs its own smaller list.

Your challenge: Create one numbered list, one bullet list, and one small nested list.

What should you notice?

An ordered list automatically numbers its items, while an unordered list uses bullet points. You do not need to type the numbers or bullets yourself.

The list container comes first: <ol> or <ul>. Then each piece of information goes inside its own <li>.

Experiment: Add another item to the middle of your ordered list. Notice how the browser automatically fixes the numbering for you.

Try nesting: Put a second <ul> inside one of your <li> elements. This creates a smaller list that belongs to that item.

For example, you could create a list called Things to Pack, then put a smaller list of snacks inside one item.

Good HTML habit: Keep nested lists inside the <li> they belong to. This makes the structure easier to understand.

<h2>Morning Mission</h2>

<ol>
  <li>Get out of bed</li>
  <li>Eat breakfast</li>
  <li>Pack my bag</li>
</ol>

<h2>Things in My Bag</h2>

<ul>
  <li>Notebook</li>
  <li>Water bottle</li>

  <li>
    Snacks
    <ul>
      <li>Apple</li>
      <li>Crackers</li>
    </ul>
  </li>
</ul>