09. HTML Lists

Lists are a very popular way of presenting information and with the addition of CSS can be styled to produce the likes of menu bars. The HTML for a list requires two elements <ul> (Unordered List) used to define the list itself and <li> (List Item) used to declare each item in the list. The <ul> is the parent of the <li>. That is the <li> tags need to nested inside the <ul> as follows:

<ul>
	<li>Apples</li>
	<li>Bananas</li>
	<li>Pears</li>
</ul>

The above would produce a list like this:

• Apples
• Bananas
• Pears

There is an alternative <ol> (Ordered List) tag that can be used to create ordered lists. However, we will see later that with CSS we can style up a <ul> list numerically without the need for an <ol>.

Both <ul> and <li> are block elements – in that their content begins on a new line. When we consider CSS you will see however that this default behavior can be changed.

Lists are often used to group links into navigation bars. As such it is common to see HTML such as:

<ul>
   <li><a href="index.html">Home</a></li>
   <li><a href="workExperience.html">Work Experience</a></li>
   <li><a href="qualifications.html">Qualifications</a></li>
</ul>

Tip

An alternative to the <ul> in the navigation context above is to use <menu>:

<menu>
   <li><a href="index.html">Home</a></li>
   <li><a href="workExperience.html">Work Experience</a></li>
   <li><a href="qualifications.html">Qualifications</a></li>
</menu>