HTML Unordered Lists

The first type of HTML lists, unordered lists, should be used when the order of the information is unimportant. In this case the list will be displayed with bullet points next to all the items by default. Don't be misled by the name "unordered" - the items will still be presented in the same order that you put them in the HTML code, it's just that the list will not mark the order as being important. A good example of an unordered list would be a shopping list. In this case the items could be listed in any order without it mattering:

<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Butter</li>
</ul>

Notice that an unordered HTML list is described using the opening and closing tags <ul> and </ul> respectively. Each list item is surrounded by the list item tags <li> and </li>.

You can also "nest" lists within one another to create more complex lists. In order to do this you must start a new list within an existing list item. Let's use the example from the previous page to analyze how to create a nested list. Here's the list again to refresh your memory:

  • Pay car insurance
  • Go to the gym
  • Visit Mary
    • Pay her the money I owe her
    • Ask if you can borrow her garden hose
  • Buy some beer

Now let's have a look at the code used to create this list:

<ul>
<li>Pay car insurance</li>
<li>Go to the gym</li>
<li>Visit Mary
    <ul>
    <li>Pay her the money I owe her</li>
    <li>Ask if you can borrow her garden hose</li>
    </ul>
</li>
<li>Buy some beer</li>
</ul>

The list behaves as normal for the first couple of items, "Pay car insurance" and "Go to the gym". The changes begin on the next item, "Visit Mary", because this is where we want to start our nested list. Notice that there is no closing </li> tag on this line; this is because we need to insert our nested list before we close the list item.

The nested list is written in exactly the same way as any normal unordered HTML list - we start it with <ul>, enter our list items using <li> and </li> and finally close the list with </ul>. Once this list is completed it is important to remember to close the "Visit Mary" list item using the closing tag </li>. We can then add any final list items to the main list before closing that too.

Lists can be nested within one another as many times as you want, allowing you to create some very complex lists indeed, but of course this makes it difficult to keep track of what you are coding. Entering extra spaces, new lines and tab stops into the HTML code will help you keep it structured in a logical and understandable way.