html · level 1 · unit 6 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
<nav> marks the menu that helps people get around.
means finding your way around. On a website, that is the menu of links to the main pages. Wrap it in a <nav> landmark so screen readers can find it fast.
Inside goes the menu you built before: a <ul> with an <a> in each <li>. The <nav> usually sits inside the <header>, near the top of the page.
Save <nav> for the main menu. A single link inside a paragraph does not need one.
<header>
<h1>Pip's Plants</h1>
<nav>
<ul>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/shop">Shop</a></li>
</ul>
</nav>
</header>Press show my page to see it here.
Count the layers: the link is in an item, in a list, in the nav, in the header.
guess first
How many links are inside the nav?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<nav>
<ul>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/games">Games</a></li>
</ul>
</nav>
<p>New today: <a href="https://example.com/chess">chess</a>.</p>your turn
Your turn. Wrap the menu.
Wrap the list of links in a <nav> landmark: open it on line 3 and close it on line 9.
Press show my page to see it here.
- all three links sit inside the navnot checked yet
- there is one navnot checked yet
fix it
Shop cannot be clicked. Can you fix it?
Press show my page to see it here.
- every menu item is a linknot checked yet
- shop goes to the shop pagenot checked yet
- Shop is not blue and cannot be clicked. What do Home and Help have?
- Every menu item needs an
<a>tag with anhref. - Wrap Shop in
<a href="https://example.com/shop">and</a>, then press run.
nailed it
people can find their way around. :D
<nav>wraps the main menu of links.- The menu inside is a list of links.
- Every menu item needs its own
<a>.
new words in your collection
- navigation
This lesson isn’t saved. A free account remembers every lesson you finish.