Wrap the page's primary content in main.
Acceptance criteria
- 1.Wrap the page's primary content in main.
HTML Tutorial · HTML Tags
These 10 tasks go with the HTML <main> 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 represents the dominant content of the of a webpage. It should contain content unique to the page , excluding repeated elements like headers, footers, sidebars, or navigation links. helps assistive technologies and search engines quickly identify the primary content of the page.” .
1.Mark the main contentexercise · easy · 10 min
Wrap the page's primary content in main.
Passes when: Wrap the page's primary content in main.
2.Main between header and footerexercise · easy · 10 min · practice plan
Place main between the header and the footer.
Passes when: Place main between the header and the footer.
3.Give main an idexercise · easy · 10 min · practice plan
Add an id so a skip link can target it.
Passes when: Add an id so a skip link can target it.
4.Add a skip linkexercise · easy · 10 min · practice plan
Add a link that jumps straight to the main content.
Passes when: Add a link that jumps straight to the main content.
5.A landmarked pageexercise · medium · 10 min · practice plan
Build a page with header, main and footer landmarks.
Passes when: Build a page with header, main and footer landmarks.
6.Fix the div used for main contentbug fix · easy · 8 min
The primary content is a main landmark.
Passes when: The primary content is a main landmark.
7.Fix the main placed before the headerbug fix · easy · 8 min · practice plan
The header comes first, then the main content.
Passes when: The header comes first, then the main content.
8.Fix the missing idbug fix · easy · 8 min · practice plan
A skip link needs something to target.
Passes when: A skip link needs something to target.
9.Fix the skip link pointing nowherebug fix · easy · 8 min · practice plan
The link's target must match the main's id.
Passes when: The link's target must match the main's id.
10.Fix the page with no main landmarkbug fix · easy · 8 min · practice plan
Screen reader users cannot jump to the content.
Passes when: Screen reader users cannot jump to the content.
Between them these tasks cover Main landmark, Skip links and One per page.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.