html · level 1 · unit 4 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
<ul> makes a bullet , with one <li> per item.
A list is a group of related things, like a shopping list. Wrap the whole list in <ul>, short for , because the order of the things does not matter.
Each thing in the list is a , wrapped in <li> and </li>. The browser puts a bullet point in front of every item and starts each one on a new line.
Only <li> elements belong straight inside a <ul>. A new item needs a new <li>, not a new line in your code.
<h2>Shopping</h2>
<ul>
<li>Eggs</li>
<li>Flour</li>
<li>Milk</li>
</ul>Press show my page to see it here.
The two spaces before each <li> are only there to make the code tidy to read.
guess first
How many bullet points will there be?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<ul>
<li>Tent
Torch</li>
<li>Marshmallows</li>
</ul>your turn
Your turn. Pack a picnic basket.
Add at least two more things to the basket on line 4, each in its own <li>. Then press run.
Press show my page to see it here.
- the basket holds three or more thingsnot checked yet
- sandwiches are still firstnot checked yet
fix it
The packing list has no bullets. Can you fix it?
Press show my page to see it here.
- there are three list itemsnot checked yet
- socks is the first itemnot checked yet
- The things are squashed onto one line with no bullets. What does each item need?
- Every item needs its own
<li>and</li>, like a little box. - Wrap Socks, Pants and Toothbrush each in
<li>and</li>, then press run.
nailed it
you made your first list. :D
<ul>holds a bullet list.- Each item goes in its own
<li>. - A new item needs a new
<li>, not a new line.
new words in your collection
- list
- unordered list
- list item
This lesson isn’t saved. A free account remembers every lesson you finish.