Ordered and unordered lists

Our rhubarb example makes use of both ordered lists, such as the instructions for a recipe, and unordered lists, such as the ingredients for a recipe.

rhubarb instructions
rhubarb ingredients

The default styling is for each list item in an ordered list to appear with a consecutive number before it, and for each list item in an unordered list to appear with a bullet before it. You can see that we've customized both these examples, which we'll discuss soon.

Creating lists

Making an ordered list is as simple as creating an ordered list element (tag name ol) and putting inside it as many list item elements (tag name li) as you would like. You can put whatever you like inside a list item element, including another list. Here is a simple example of an ordered list:

<ol>
  <li>Content</li>
  <li>Style</li>
  <li>Action</li>
</ol>

To make the list into an unordered list, replace the ordered list element by an unordered list element (tag name ul).

simple list tree

Tree representations of lists

In the tree representation of a list, each list item element will be a child of either an ordered list element or an unordered list element.

A list inside a paragraph of text

Remember how we said that a paragraph element is different from a paragraph of text? Here is an example of the difference: although you can insert a list in the middle of a paragraph of text, you cannot insert a list in a paragraph element. Instead, text followed by a list followed by more text would be organized as a paragraph element followed by a list element followed by another paragraph element. To group all the information together, the three elements could all be placed in a division element.