Build a <nav> containing three links: Home linking to "/", About linking to "/about", and Contact linking to "/contact". Each link's text must match its destination.
Output ready when you are
Press Run to render your code, or Submit to validate your solution.
HTML Tutorial · HTML Text and Links
These 20 tasks go with the HTML Links chapter. 10 of them ask you to build something small from scratch; 10 give you code that is already broken and ask you to work out why. Set aside about 240 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “HTML Links allow you to connect one page to another or link to files, images, or external websites. Links are created using the (anchor) tag, which turns any text or image into a clickable hyperlink.” .
1.Build a primary navigationexercise · easy · 15 min
Build a <nav> containing three links: Home linking to "/", About linking to "/about", and Contact linking to "/contact". Each link's text must match its destination.
Passes when: Add a <nav> element; Add three links inside the nav; The first link should go to "/"; The second link should go to "/about".
2.Link out to another site safelyexercise · easy · 15 min · practice plan
Add a link with the text "MDN Web Docs" pointing to https://developer.mozilla.org that opens in a new tab. Because it opens in a new tab, protect the original page with rel="noopener noreferrer".
Passes when: Link to https://developer.mozilla.org; Open the link in a new tab with target="_blank"; Add rel="noopener noreferrer"; The link text should read "MDN Web Docs".
3.Add contact linksexercise · easy · 15 min · practice plan
Add an email link to hello@example.com and a phone link to +1-555-0100. Use the mailto: and tel: URL schemes.
Passes when: Add a mailto: link; The email link should go to hello@example.com; Add a tel: link.
4.Add a skip-to-content linkexercise · easy · 15 min · practice plan
Add a "Skip to content" link before the header that jumps to the #main-content section, so keyboard users can bypass repeated navigation.
Passes when: Add a link that reads "Skip to content"; The link should point to #main-content; Keep the #main-content target in place.
5.Offer a file downloadexercise · easy · 15 min · practice plan
Add a link to "/files/handbook.pdf" with the text "Download the handbook" that downloads the file instead of navigating to it, using the download attribute.
Passes when: Link to /files/handbook.pdf; Add the download attribute; The link text should read "Download the handbook".
6.Fix the unsafe new-tab linkbug fix · easy · 15 min
This pricing link opens in a new tab but leaves the original page exposed to the new page via window.opener. Add rel="noopener noreferrer" to close the hole.
Passes when: Add rel="noopener noreferrer" to the link.
7.Fix the broken email linkbug fix · easy · 15 min · practice plan
This link is supposed to open the visitor's email client addressed to support@example.com, but clicking it just navigates the current page. Fix the href.
Passes when: The href should be mailto:support@example.com.
8.Fix the mismatched anchor linkbug fix · easy · 15 min · practice plan
The "Jump to FAQ" link should scroll to the FAQ section below, but its href doesn't match the section's id. Fix the href so it points at the real id.
Passes when: The link should point to #faq; Keep the #faq section in place.
9.Fix the link with no destinationbug fix · easy · 15 min · practice plan
This "Terms of Service" link is missing its href entirely, so it isn't focusable or navigable. Give it href="/terms".
Passes when: Add href="/terms" to the link.
10.Fix the misspelled targetbug fix · easy · 15 min · practice plan
This link should open the changelog in a new tab, but a typo in the target attribute makes it open in the current tab instead. Fix the target value.
Passes when: Fix the target attribute to "_blank".
11.Add a basic linkexercise · easy · 10 min · practice plan
Link the text "Docs" to https://example.com.
Passes when: Link the text "Docs" to https://example.com.
12.Link to another pageexercise · easy · 10 min · practice plan
Link "About" to /about.
Passes when: Link "About" to /about.
13.Open a link in a new tab safelyexercise · easy · 10 min · practice plan
Add target and the rel that prevents tab-nabbing.
Passes when: Add target and the rel that prevents tab-nabbing.
14.Link to a page sectionexercise · easy · 10 min · practice plan
Link "Jump" to the #details anchor.
Passes when: Link "Jump" to the #details anchor.
15.Add a download linkexercise · medium · 10 min · practice plan
Link a file and mark it as a download.
Passes when: Link a file and mark it as a download.
16.Fix the missing hrefbug fix · easy · 8 min · practice plan
Without href the anchor is not a link at all.
Passes when: Without href the anchor is not a link at all.
17.Fix the unsafe new-tab linkbug fix · easy · 8 min · practice plan
target="_blank" without rel exposes the opener.
Passes when: target="_blank" without rel exposes the opener.
18.Fix the wrong attributebug fix · easy · 8 min · practice plan
Links use href, not src.
Passes when: Links use href, not src.
19.Fix the missing hash on the anchorbug fix · easy · 8 min · practice plan
The in-page link is missing its #.
Passes when: The in-page link is missing its #.
20.Fix the link with no textbug fix · easy · 8 min · practice plan
The anchor is empty, so nothing is clickable.
Passes when: The anchor is empty, so nothing is clickable.
Between them these tasks cover HTML Links, Anchor elements, href targets and Safe external links.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.