Practice: HTML Text Fundamentals

This article continues our discussion on writing HTML and describes how to structure a webpage. Start by downloading and viewing the unstructured Quick Hummus Recipe. Then, use the Active Learning sections to learn how to structure the document using interactive examples.

You will see that there are several reasons why the structure of a webpage is essential, including use by screen readers and locating pages using a search engine. The complete solution is located here.

Lists

Ordered List

Ordered lists are lists in which the order of the items does matter. Let's take a set of directions as an example:

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol> element, rather than <ul>:

<ol>
   <li>Drive to the end of the road</li>
   <li>Turn right</li>
   <li>Go straight across the first two roundabouts</li>
   <li>Turn left at the third roundabout</li>
   <li>The school is on your right, 300 meters up the road</li>
 </ol>

Active learning: Marking up an ordered list

Try editing the live sample below to create your very own HTML ordered list.

Live output

Editable code

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our GitHub repo.