Lists

The idea

A <ul> is like a grocery list stuck to the fridge - any order you shop in is fine. An <ol> is like a recipe's numbered steps - skip step 2 and jump to step 4, and things go wrong. Same wrapper idea, different promise about order.

What it actually is

An unordered list (<ul>) shows items as bullet points - any order is fine. An ordered list (<ol>) numbers them automatically instead, for when the order actually matters. Either way, every single item goes inside its own <li> tag.

How you write it

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

A worked example

<ul>
  <li>Stegosaurus</li>
  <li>Triceratops</li>
  <li>Velociraptor</li>
</ul>

<ul> starts the whole bulleted list, and each <li> is one bullet point inside it - three <li> tags here means three bullets, one per dinosaur name. Nothing about the order matters; swapping the <li> lines around wouldn't change the meaning at all.

<ol>
  <li>Dig a hole</li>
  <li>Place the fossil cast</li>
  <li>Cover it back up</li>
</ol>

<ol> automatically numbers each <li> - 1, 2, 3 - because these steps have to happen in a specific order. Swap an <ol> for a <ul> and you'd lose that numbering entirely, even though the steps still only make sense in this order.

Mistakes children actually make

1. Forgetting to wrap each item in its own <li> - text placed directly inside <ul> or <ol> with no <li> around it won't display as a proper bullet or numbered item.
2. Using <ul> for something that's really a sequence of steps (like a recipe) - it'll still display, just without the numbers that actually communicate "this order matters."
3. Nesting a list inside another list without putting the inner <ul>/<ol> inside one of the outer list's <li> items - a sub-list belongs INSIDE the <li> it's a part of, not floating next to it as a separate sibling list.

Then they try it

In the app this lesson continues with the animated explanation, spoken aloud, and then the practice: Add two list items inside the <ul>: "Stegosaurus" and "Triceratops". The editor runs your child’s real code and checks the result, with their coding buddy reacting to what they wrote.