html · level 1 · unit 4 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A list of links makes a .
Most websites have a menu: a list of links to their main pages. In HTML, a menu is a <ul> where every <li> holds one <a>.
This is nesting again. The link sits inside the item, and the item sits inside the list. Close them in reverse order: </a>, then </li>.
Keep menu words short and clear, one or two words that say where each link goes.
<ul>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/recipes">Recipes</a></li>
<li><a href="https://example.com/contact">Contact</a></li>
</ul>Press show my page to see it here.
Every menu item follows the same pattern, so copy one line and change the words.
guess first
How many links can you click?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<ul>
<li><a href="https://example.com/cats">Cats</a></li>
<li>Dogs</li>
<li><a href="https://example.com/fish">Fish</a></li>
</ul>your turn
Your turn. Build a sweet shop menu.
Type words for the second link on line 3. Then turn the last item into a link of your own, with an href starting https://example.com/.
Press show my page to see it here.
- all three menu items are linksnot checked yet
- the last link has an addressnot checked yet
fix it
Help has lost its bullet. Can you fix it?
Press show my page to see it here.
- the menu has three itemsnot checked yet
- every link sits inside an itemnot checked yet
- Help has no bullet point. What do Home and Shop have that it lacks?
- Every menu link needs its own list item around it.
- Wrap the Help link in
<li>and</li>, then press run.
nailed it
you built your first menu. :D
- A menu is a list of links.
- Each
<a>sits inside its own<li>. - Close
</a>before</li>.
new words in your collection
- menu
This lesson isn’t saved. A free account remembers every lesson you finish.