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.


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
).

Tree representations of lists
In the tree representation of a list, each list item elementAn element for an item in a list. will be a childA node "below" a node in a tree, connected by an edge. of either an ordered list elementAn element for an ordered list. or an unordered list elementAn element for an unordered list..
A list inside a paragraph of text
Remember how we said that a paragraph elementAn element consisting of text that forms a paragraph. 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 elementAn element used to group elements on different lines..