You are here:

1. Manual
2. Development
3. Descriptive markup
4. Writing
5. Lists

Unordered lists

Most lists of items are put in an unordered list, a bullet list by means of the ul (unordered list) element. Individual items in the list are marked via the li (list item) element.

<ul>
<li>Milk</li>
<li>Bread</li>
<li>Sugar</li>
</ul>

Sometimes lists can contain other lists.

<ul>
<li>To the hairdresser</li>
<li>To the supermarket:
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Sugar</li>
</ul>
</li>
<li>To the chemist’s</li>
</ul>

In many cases, a navigation menu is also a list, either ordered or unordered. The appearance of a list and the items contained in it can be influenced via CSS (Cascading Style Sheets). There are many sites on the Web that use impressive graphic menus based on list markup and CSS.

Ordered lists

The ol (ordered list) element and the above-mentioned li (list item) element are used for numerical lists as well as other lists assigning priority ranking. An example of a simple list, which will eventually be displayed as a list numbered from 1 to 3 is shown below:

<ol>
<li>Drive straight on for 400 metres</li>
<li>Turn right into Marktstraat</li>
<li>You will arrive at Ruiterslaan after 200 metres</li>
</ol>

The appearance of ordered lists can be influenced by means of CSS (Cascading Style Sheets), but the possibilities are limited due to poor browser support. The notation of the numbers is particularly difficult to change. In practice, this reduces the suitability of the ol element for an application such as a detailed table of contents. For applications like that, the (unordered list) is recommended:

<ul>
<li>1. Introduction </li>

<li>2. Publishing
<ul>
<li>2.1. Writing style</li>
<li>2.2. Letter structure</li>
<li>2.3. Addressing</li>
</ul>
</li>

<li>3. Editing</li>
</ul>

Definition lists

A definition list is a list of terms and corresponding definitions. Three elements are available: the dl (definition list) element, the dt (definition term) element and the dd (definition data) element.

<dl>
<dt>Inflation</dt>
<dd>
Development of the retail price index compared to the previous year.
</dd>

<dt>IZW households</dt>
<dd>
Non-profit institutions serving households, such as trade unions, sports clubs, etc.
</dd>
...
</dl>

Alternatives to list markup

It is not always clear when a list can be used. Not every enumeration of subjects is necessarily a list. Sometimes, you can revert to heading markup, as in this example of general terms and conditions:

<h2>3. Cancellation</h2>

<p>
If the other party wishes to cancel an agreement once it has been effected, provided that we agree to this dissolution, 15% of the order price (incl. BTW [Dutch VAT]) will be charged as a cancellation fee.
</p>

<h2>4. Prices</h2>
...