html · level 2 · unit 6 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A jumps keyboard users past the menu.
Many people move around a page with the instead of a mouse. Each press moves to the next link or box. A menu of 20 links means 20 presses on every page before reaching anything new.
A skip link fixes this. Make it the very first thing in <body>: a link to the id of your <main>, such as href="#content". One press of Enter jumps past the whole menu.
Many sites hide it until the Tab key reaches it. Here it stays in plain sight.
<body>
<a href="#content">Skip to content</a>
<header>
<nav aria-label="Main">
<a href="https://example.com/shop">Shop</a>
<a href="https://example.com/visit">Visit</a>
<a href="https://example.com/cafe">Café</a>
</nav>
</header>
<main id="content">
<h1>Fern Hill Farm</h1>
<p>Meet the lambs every spring.</p>
</main>
</body>Press show my page to see it here.
Press Tab on a site you use often. Does a Skip to content link appear?
guess first
Where does this skip link land?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<body>
<a href="#main">Skip to content</a>
<nav aria-label="Main">
<a href="https://example.com/news">News</a>
</nav>
<main id="main">
<h1>Today's news</h1>
</main>
</body>your turn
Your turn. Add a skip link.
On line 2, as the first thing in the body, add a link that jumps to the main content. Its id is content.
Press show my page to see it here.
- the first link jumps to the contentnot checked yet
- the skip link has wordsnot checked yet
fix it
The skip link goes nowhere. Can you fix it?
Press show my page to see it here.
- the main content has the id contentnot checked yet
- the skip link points at itnot checked yet
- The link points at
#content. Which element has thatid? - Nothing has the
idcontent yet, so the link has nowhere to land. - Add
id="content"to the<main>tag on line 6, then press run.
nailed it
keyboard users can skip the menu now. :D
- Many people move through pages with the Tab key.
- A skip link comes first and jumps to
<main>. - Give
<main>theidthe link points to.
new words in your collection
- Tab key
- skip link
This lesson isn’t saved. A free account remembers every lesson you finish.