Add an aside holding related links.
Acceptance criteria
- 1.Add an aside holding related links.
HTML Tutorial · HTML Tags
These 10 tasks go with the HTML <aside> 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 content that is related to the main content but separate from it , like sidebars, pull quotes, or additional information. It is often used for tangentially related content such as advertisements, links, or notes. helps distinguish supplementary content from the main content, improving semantic structure.” .
1.Add a sidebarexercise · easy · 10 min
Add an aside holding related links.
Passes when: Add an aside holding related links.
2.A pull quoteexercise · easy · 10 min · practice plan
Put a pull quote in an aside beside the article.
Passes when: Put a pull quote in an aside beside the article.
3.Label the sidebarexercise · easy · 10 min · practice plan
Give the aside an accessible label.
Passes when: Give the aside an accessible label.
4.An author boxexercise · easy · 10 min · practice plan
Add an aside with a short author note.
Passes when: Add an aside with a short author note.
5.Article with a sidebarexercise · medium · 10 min · practice plan
Build an article with a labelled aside of links.
Passes when: Build an article with a labelled aside of links.
6.Fix the div used as a sidebarbug fix · easy · 8 min
Tangential content is an aside.
Passes when: Tangential content is an aside.
7.Fix the pull quote in the body flowbug fix · easy · 8 min · practice plan
A pull quote sits apart from the main text.
Passes when: A pull quote sits apart from the main text.
8.Fix the unlabelled asidebug fix · easy · 8 min · practice plan
Sidebars need a label so they can be skipped.
Passes when: Sidebars need a label so they can be skipped.
9.Fix the author box with no headingbug fix · easy · 8 min · practice plan
The box does not say what it is.
Passes when: The box does not say what it is.
10.Fix the missing second related linkbug fix · easy · 8 min · practice plan
Only one related link was added.
Passes when: Only one related link was added.
Between them these tasks cover Tangential content, Sidebars and Pull quotes.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.