Wrap the site links in a nav element.
Acceptance criteria
- 1.Wrap the site links in a nav element.
HTML Tutorial · HTML Tags
These 10 tasks go with the HTML <nav> Tag chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 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: “The tag defines a section of a webpage that contains navigation links. It helps users move around a website and assists search engines in understanding the site’s structure. Commonly used for main menus, sidebars, and internal page navigation.” .
1.Add a navigation blockexercise · easy · 10 min
Wrap the site links in a nav element.
Passes when: Wrap the site links in a nav element.
2.Navigation as a listexercise · easy · 10 min · practice plan
Put the links in a list inside the nav.
Passes when: Put the links in a list inside the nav.
3.Label the navigationexercise · easy · 10 min · practice plan
Give the nav an accessible label.
Passes when: Give the nav an accessible label.
4.Breadcrumbsexercise · easy · 10 min · practice plan
Add a second nav labelled Breadcrumb.
Passes when: Add a second nav labelled Breadcrumb.
5.Header with navigationexercise · medium · 10 min · practice plan
Put a labelled nav inside the page header.
Passes when: Put a labelled nav inside the page header.
6.Fix the div used for navigationbug fix · easy · 8 min
A menu is a navigation landmark.
Passes when: A menu is a navigation landmark.
7.Fix the links not in a listbug fix · easy · 8 min · practice plan
A set of menu links is a list.
Passes when: A set of menu links is a list.
8.Fix the missing labelbug fix · easy · 8 min · practice plan
Two navs on one page need labels to be told apart.
Passes when: Two navs on one page need labels to be told apart.
9.Fix the wrong label attributebug fix · easy · 8 min · practice plan
Landmarks are named with aria-label.
Passes when: Landmarks are named with aria-label.
10.Fix the nav outside the headerbug fix · easy · 8 min · practice plan
The main menu belongs inside the header.
Passes when: The main menu belongs inside the header.
Between them these tasks cover Navigation landmarks, Menus and Accessibility.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.