Lists

There are 3 types of list in HTML: Unordered, Ordered and Definition.

Unordered List - <ul>

The unodered list is probably the most commonly used form of list. It is designed to be used where the order of the items in the list is not important, e.g. a shopping list)

Within an unordered list, each item is surrounded by a <li> tag, which represents a List Item - hence the 'li'

The example below shows an unordered list:

<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Cheese</li>
</ul>

This would render as a list that (by default) appears as shown below:

By default browsers will typically add round bullets, but the bullet styles can be styled are removed. It is also possible to display the items in a row, rather than underneath one another.

Ordered List - <ol>

An ordered list is designed to be used where order is important, e.g. as a set of instructions to assemble furniture). By default a browser will number items in an ordered list, starting at 1.

The format for an ordered lists is the same as an unordered one, except that opening and closing <ul> tags are replaced with <ol>

Definition List - <dl>

The third type of list is a definition list <dl>, and it is used to provide a term and a definition, such as a dictionary. Rather than having a single list item, a definition list has two elements - a term and a definition, these are represented by <dt> and <dd> elements respectively.

An example definition list is shown below:

<dl>
    <dt>Bread</dt>
    <dd>Useful for making toast</dd>
    <dt>Jam</dt>
    <dd>Great for spreading on toast</dd>
</dl>

The browser would display the above definition list as shown below:

Bread
Useful for making toast
Jam
Great for spreading on toast