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
Press Esc to move focus away from the code area (Tab inserts a tab character).
If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our GitHub repo.