Test your skills: Advanced HTML text
The aim of this skill test is to help you assess whether you understand how to use lesser-known HTML elements to mark up advanced semantic features.
Note: To get help, read our Test your skills usage guide. You can also reach out to us using one of our communication channels.
Task 1
In this task, we want you to add some semantics to the provided HTML.
To complete this task:
- 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:
html
<h1>Advanced text semantics</h1>
<p>Let's start with a quote:</p>
<p>
HTML, Hypertext Markup Language is by default accessible, if used correctly.
</p>
<p>CSS can also be used to make web pages more, or less, accessible.</p>
<p>Chemical Formulae: H2O (Water), C2H6O (Ethanol).</p>
<p>
Dates: December 25th 2019 (Christmas Day), November 2nd 2019 (Día de los
Muertos).
</p>
Click here to show the solution
Your finished HTML should look like this:
html
<h1>Advanced text semantics</h1>
<p>Let's start with a quote:</p>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">
<p>
<abbr title="HyperText Markup Language">HTML</abbr>, Hypertext Markup
Language is by default accessible, if used correctly.
</p>
</blockquote>
<p>
<abbr title="Cascading Style Sheets">CSS</abbr>, Cascading Style Sheets, can
also be used to make web pages more, or less, accessible.
</p>
<p>
Chemical Formulae: H<sub>2</sub>O (Water), C<sub>2</sub>H<sub>6</sub>O
(Ethanol).
</p>
<p>
Dates:
<time datetime="2019-12-25">December 25<sup>th</sup> 2019</time>
(Christmas Day),
<time datetime="2019-11-02">November 2<sup>nd</sup> 2019</time> (Día de los
Muertos).
</p>