Unordered Lists and Ordered Lists

What are lists?
Often, we will want to include some kind of list on our page. A list is simply of collection of items of information that are connected by a common theme. Here are some examples of lists:

  • My favourite bands
  • Presidents of the United States
  • Wettest countries of the world
  • Things to do before I die

The collection of example lists above is in itself a list.

<ul> Unordered List
A unordered list is one in which there is no particular order to the list entries that it contains. For example, “different colours”.

 <li> List Item
We enclose each item in our list in <li></li> tags:

<p>Some different colours:</p>
<ul>
<li>red</li>
<li>yellow</li>
<li>orange</li>
<li>pink</li>
<li>blue</li>
</ul>

The previous code would display something like this:

Some different colours:

  • red
  • yellow
  • orange
  • pink
  • blue

<ol> Ordered List
An ordered list is one in which there is an order to the list entries that it contains. That is, the entries would make sense if they were consecutively labelled 1, 2, 3, 4, etc. For example:

<p>My greatest musical influences:</p>
<ol>
<li>PR Sarkar</li>
<li>Bob Dylan</li>
<li>Ali Farka Toure</li>
<li>Van Morrison</li>
<li>Pink Floyd</li>
<li>Asian Dub Foundation</li>
</ol>

This would display by default like this:

My greatest musical influences:

  1. PR Sarkar
  2. Bob Dylan
  3. Ali Farka Toure
  4. Van Morrison
  5. Pink Floyd
  6. Asian Dub Foundation

Using a List for Site Navigation
On our website, we will have a collection of pages that link together. The pages within that collection will have some kind of relative importance between each other. We will want to make a navigation area on each of our web pages, so that the user can quickly navigate their way through our site. This would be a series of links from our web page to other pages.
It makes good sense to make that collection of links into a list. For example:

<h2>Site Navigation</h2>
<ul>
<li><a href=”index.htm”>Home Page</a></li>
<li><a href=”music.htm”>Music</a></li>
<li><a href=”photos.htm”>Photos</a></li>
<li><a href=”news.htm”></a>News</li>
<li><a href=”contact.htm”>Contact Me</a></li>
</ul>

This would display something like this:

Site Navigation

  • Home Page
  • Music
  • Photos
  • News
  • Contact Me

Later on, we will learn how to style our pages so that they display in the browser just how we want them to. By structuring our site navigation as an HTML list, we open up lots of possibilities for controlling the way that it displays. (See CSS stylesheets).