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

Unordered List

Now let's turn our attention to lists. Lists are everywhere in life – from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the web, too, and we've got three different types to worry about.

Unordered

Unordered lists are used to mark up lists of items for which the order of the items doesn't matter. Let's take a shopping list as an example:

milk
eggs
bread
hummus

Every unordered list starts off with a <ul> element – this wraps around all the list items:

<ul>
milk
eggs
bread
hummus
</ul>

The last step is to wrap each list item in a <li> (list item) element:

<ul>
   <li>milk</li>
   <li>eggs</li>
   <li>bread</li>
   <li>hummus</li>
 </ul>

Active learning: Marking up an unordered list

Try editing the live sample below to create your very own HTML unordered 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.