Practice: HTML Text Fundamentals

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

Press Esc to move focus away from the code area (Tab inserts a tab character).