Lesson ยท 8 min
Lists
Two kinds of list
HTML has two main kinds of list. Both use li elements for the items.
ulis an unordered list. The browser shows a bullet before each item.olis an ordered list. The browser shows a number before each item.
Use ol when the order matters, such as the steps of a recipe. Use ul when it does not.
<ul>
<li>Bread</li>
<li>Cheese</li>
</ul>
<ol>
<li>Slice the bread</li>
<li>Add the cheese</li>
</ol>
The only direct children of a ul or an ol are li elements.
Lists inside lists
To make a sub-list, put a new ul or ol inside an li. Do not put it between two li elements.
<ul>
<li>Fruit
<ul>
<li>Pear</li>
<li>Plum</li>
</ul>
</li>
<li>Bread</li>
</ul>
The browser indents the inner list and changes its bullet.
Your turn
Add the three lists in the editor. Indenting your code is not required, but it makes the nesting easier to see.
Tasks
3 to do
Task 1, not checked yet. Add a bulleted list with the
ulelement. It has three items in this order:Water,Map,Snacks. Use anlielement for each item.Task 2, not checked yet. Add a numbered list with the
olelement. The steps areBoil the water,Add the tea,Wait three minutes.Task 3, not checked yet. Inside the
Snacksitem, add a secondulwith two items:ApplesandNuts.
Task 1 of 3
Add a bulleted list with the ul element. It has three items in this order: Water, Map, Snacks. Use an li element for each item.