html · level 1 · unit 4 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A list can live inside a list item.
Big lists often hold smaller lists, like a packing list with a section for clothes. A list inside another list is called a .
The inner list goes inside an <li>, after its words and before its </li>. The browser indents it and gives it different bullets.
Indent your code to match. Each level inside gets two more spaces, so you can see at a glance what belongs where.
<ul>
<li>Clothes
<ul>
<li>Socks</li>
<li>Jumper</li>
</ul>
</li>
<li>Snacks</li>
</ul>Press show my page to see it here.
Indenting does not change the page. It only helps people read your code.
guess first
Where will Apple and Pear go?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Pear</li>
</ul>
</li>
<li>Bread</li>
</ul>your turn
Your turn. Plan a trip to the zoo.
Give Birds its own nested list with at least two birds. Put a whole <ul>, with its <li> items, in the blank.
Press show my page to see it here.
- the main list still has two itemsnot checked yet
- birds has two or more birds under itnot checked yet
fix it
The sports are not tucked in. Can you fix it?
Press show my page to see it here.
- the main list has two itemsnot checked yet
- football and tennis sit under sportsnot checked yet
- Football and Tennis line up with Sports. Why are they not tucked in?
- An
<li>cannot hold other items by itself. They need a list of their own. - Wrap Football and Tennis in
<ul>and</ul>, inside the Sports item.
nailed it
your lists have lists inside. :D
- A nested list goes inside an
<li>. - Open the inner list before the outer
</li>. - Indent your code to show what belongs where.
new words in your collection
- nested list
This lesson isn’t saved. A free account remembers every lesson you finish.