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.
Text basics 1
In this task, we want you to mark up the provided HTML using semantic heading and paragraph elements.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
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 updated content 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>
Text basics 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.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<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 updated content 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>
Text basics 3
In this task, we want you to turn the provided animals and their definitions into a description list.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<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 updated content 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>
Text basics 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.
The starting point of the task looks like this:
Here's the underlying code for this starting point:
<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 updated content 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>