Test your skills: Advanced HTML text
The aim of this skill test is to assess whether you understand how to use lesser-known HTML elements to mark up advanced semantic features.
Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.
If you get stuck, you can reach out to us in one of our communication channels.
Task 1
In this task, we want you to turn the provided animals and their definitions into a description list.
The finished example should look like this:
Try updating the live code below to recreate the finished example:
Download the starting point for this task to work in your own editor or in an online editor.
Task 2
In this task, we want you to add some semantics to the provided HTML as follows:
- Turn the second paragraph into a block-level quote, and semantically indicate that the quote is taken from Accessibility.
- Semantically mark up "HTML" and "CSS" as acronyms, providing expansions as tooltips.
- Use subscript and superscript to provide correct semantics for the chemical formulae and dates, and make them display correctly.
- Semantically associate machine-readable dates with the dates in the text.
The finished example should look like this:
Try updating the live code below to recreate the finished example:
Download the starting point for this task to work in your own editor or in an online editor.