HTML Lists

<!DOCTYPE html>
<html>
<head>
	<title>Fruit</title>
</head>
<body>
	<h1>Favorite Fruit</h1>
	<ul>
		<li>Bananas</li>
		<li>Oranges</li>
	</ul>
</body>
</html>

In the above example, I've created an HTML list and added our fruit to it.

The list is specified using the <ul> tag and each list item is nested inside using the <li> tag.

The <ul> element represents an unordered list. This is because the items are listed in no particular order. This results in identical bullet points being prefixed to each item in the list.

If we wanted to list the items in a particular order, we would use an ordered list. To do this we would simply swap the <ul> tag for a <ol> tag, so that it looked like this:


<ol>
	<li>Bananas</li>
	<li>Oranges</li>
</ol>

The list item tags (i.e. the <li>) would remain the same (although we would need to ensure that they are listed in the correct order).

An HTML list also helps the browser understand that it is a list too. That way it can present the list in a particular way (eg, with bullet points or numbers, etc). However, you can change this using Cascading Style Sheets (CSS). In fact, you can change the styles of any HTML element using CSS. We discuss CSS later in the tutorial.

Types of Lists

HTML includes various tags for different types of lists. Here's an explanation.

<ul>
The <ul> element represents an unordered list. An unordered list is a list where the list items are listed in no particular order. Therefore, each list item can be listed without numbers or other ordering mechanisms. An unordered list will typically be displayed with round or square bullet points next to each item (as opposed to numbers or letters etc). Images can also be used to create your own custom bullets.

Like this:


<ul>
	<li>Bananas</li>
	<li>Oranges</li>
</ul>
<ol>
This element represents an ordered list. An ordered list is a list where the items have been ordered intentionally. The main point of an ordered list is that the list items need to be ordered in order to convey the intended meaning. Changing the order would change the meaning of the list (or document). For example, if we wanted to display the fruit in order of preference, we would need to use an ordered list. This enables us to list the fruit in the exact order of preference. By changing the order would change the meaning. Another example would be if our fruit was a list of ingredients in a recipe, and that they had to be added in the correct order.

An ordered list can be ordered using decimal numbers (eg, 1. 2. 3. ... etc), lower case latin alphabet (eg. a. b. c. ... etc), upper case latin alphabet (eg. A. B. C. ... etc), lower case roman numerals (eg. i. ii. iii. ... etc), or upper case roman numerals (eg. I. II. III. ... etc). You can specify whether the list is ascending (eg, 1. 2. 3. ... etc) or descending (3. 2. 1. ... etc). 


<ol>
	<li>Bananas</li>
	<li>Oranges</li>
</ol>
<dl>
Represents a definition list. In a definition list, each list item contains two or more entries; a term and at least one description. The term is represented by the <dt> element and the description is represented by the <dd> element. An example of a definition list is the one that you are reading right now. The three types of lists that I've listed here are presented within a definition list.

A definition list is written like this:


<dl>
	<dt>Bananas</dt>
	<dd>A sweet yellow fruit...</dd>
	<dt>Oranges</dt>
	<dd>A sweet orange fruit...</dd>
</dl>

HTML also includes other methods for lists, such as providing a list of items in a drop-down menu on a form, but we'll get to that later.