Test your skills: HTML text basics
The aim of this skill test is to help you assess whether you understand how to mark up text in HTML to give it structure and meaning.
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 mark up the provided HTML using semantic heading and paragraph elements.
Basic HTML Animals
This is the first paragraph in our page. It introduces our animals.
The Llama
Our Llama is a big fan of list items. When she spies a patch of them on a web page, she will eat them like sweets, licking her lips as she goes.
The Anaconda
The crafty anaconda likes to slither around the page, traveling rapidly by way of anchors to sneak up on his prey.
The finished example should look like this:
Click here to show the solution
Your finished HTML should look like this:
<h1>Basic HTML Animals</h1>
<p>This is the first paragraph in our page. It introduces our animals.</p>
<h2>The Llama</h2>
<p>
Our Llama is a big fan of list items. When she spies a patch of them on a web
page, she will eat them like sweets, licking her lips as she goes.
</p>
<h2>The Anaconda</h2>
<p>
The crafty anaconda likes to slither around the page, traveling rapidly by way
of anchors to sneak up on his prey.
</p>
Task 2
In this task, we want you to turn the first un-marked up list into an unordered list, and the second one into an ordered list.
<h1>Looking at lists</h1>
<p>Turn the following list of my favorite vegetables into an unordered list.</p>
Cucumber
Broccoli
Asparagus
Pepper
<p>Turn the following directions into an ordered list.</p>
First knock on the door
When prompted, say the magic word
Wait for at least 5 seconds
Turn the handle and push
The finished example should look like this:
Click here to show the solution
Your finished HTML should look like this:
<h1>Looking at lists</h1>
<p>Turn the following list of my favorite vegetables into an unordered list.</p>
<ul>
<li>Cucumber</li>
<li>Broccoli</li>
<li>Asparagus</li>
<li>Pepper</li>
</ul>
<p>Turn the following directions into an ordered list.</p>
<ol>
<li>First knock on the door</li>
<li>When prompted, say the magic word</li>
<li>Wait for at least 5 seconds</li>
<li>Turn the handle and push</li>
</ol>
Task 3
In this task, we want you to turn the provided animals and their definitions into a description list.
<h1>Advanced HTML Animals</h1>
Llama
Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and spits a lot. Big fan of list items.
Anaconda
A very large constrictor snake; travels rapidly by way of anchors to sneak up on his prey.
Hippopotamus
His description is bottomless.
The finished example should look like this:
Click here to show the solution
Your finished HTML should look like this:
<h1>Advanced HTML Animals</h1>
<dl>
<dt>Llama</dt>
<dd>
Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and
spits a lot. Big fan of list items.
</dd>
<dt>Anaconda</dt>
<dd>
A very large constrictor snake; travels rapidly by way of anchors to sneak
up on his prey.
</dd>
<dt>Hippopotamus</dt>
<dd>His description is bottomless.</dd>
</dl>
Task 4
In this task, you are provided with a paragraph, and your aim is to use some inline elements to mark up a couple of appropriate words with strong importance, and a couple with emphasis.
<h1>Emphasis and importance</h1>
<p>
There are two things I care about — music and friends. Someday I might be able
to get my friends interested in each other, and my music!
</p>
The finished example should look something like this:
Click here to show the solution
Your finished HTML should look like this:
<h1>Emphasis and importance</h1>
<p>
There are <strong>two</strong> things I care about —
<strong>music</strong> and <strong>friends</strong>. Someday I
<em>might</em> be able to get my friends interested in each other,
<em>and</em> my music!
</p>