Add a ruby annotation with its reading.
Acceptance criteria
- 1.Add a ruby annotation with its reading.
HTML Tutorial · HTML Tags
These 10 tasks go with the HTML Ruby Annotations: <ruby>, <rt> and <rp> 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: “Learn how the HTML <ruby>, <rt>, and <rp> elements create pronunciation and explanatory annotations with fallback punctuation.” .
1.Annotate a characterexercise · easy · 10 min
Add a ruby annotation with its reading.
Passes when: Add a ruby annotation with its reading.
2.Add fallback bracketsexercise · easy · 10 min · practice plan
Add rp elements around the reading for old browsers.
Passes when: Add rp elements around the reading for old browsers.
3.Annotate two charactersexercise · easy · 10 min · practice plan
Give two characters their own readings.
Passes when: Give two characters their own readings.
4.Ruby in a sentenceexercise · easy · 10 min · practice plan
Put a ruby annotation inside a paragraph.
Passes when: Put a ruby annotation inside a paragraph.
5.A fully annotated wordexercise · medium · 10 min · practice plan
Two characters, each with a reading and fallback brackets.
Passes when: Two characters, each with a reading and fallback brackets.
6.Fix the reading left as plain textbug fix · easy · 8 min
The pronunciation belongs in an rt element.
Passes when: The pronunciation belongs in an rt element.
7.Fix the missing fallback bracketsbug fix · easy · 8 min · practice plan
Old browsers show the reading inline without rp.
Passes when: Old browsers show the reading inline without rp.
8.Fix the second character with no readingbug fix · easy · 8 min · practice plan
Each character needs its own rt.
Passes when: Each character needs its own rt.
9.Fix the ruby outside the sentencebug fix · easy · 8 min · practice plan
The annotated word belongs in the paragraph.
Passes when: The annotated word belongs in the paragraph.
10.Fix the half-bracketed annotationbug fix · easy · 8 min · practice plan
Each reading needs an opening and a closing rp.
Passes when: Each reading needs an opening and a closing rp.
Between them these tasks cover Ruby annotations, rt pronunciation and rp fallback.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.