Lists

line.gif

There are three types of lists that are commonly used in HTML. These are shown in the table below.

Unordered Lists Related tags: <ul> & <li>.
Ordered Lists Related tags: <ol> & <li>.
Definition Lists Related tags: <dl>, <dt> & <dd>.

Unordered Lists

Perhaps the simplest type of list in HTML is the unordered list. An example of an unordered list is shown in the following code fragment:

<ul>
<li>This is the first item in the list.
<li>This is the second item in the list.
<li>This is the last item in the list.
</ul>

which is rendered as follows.

The tag <ul> has the attribute type, which may be employed in adjusting the type of bullet used when displaying the list. For example, the above list may be coded to display with square bullet as follows:

<ul type=square>
<li>This is the first item in the list.
<li>This is the second item in the list.
<li>This is the last item in the list.
</ul>

which is shown live below.

If the bullet has not changed to a square bullet then your browser doesn't support the type attribute (as it should). Unlike some other tag languages, in HTML all types of lists may be successfully nested. The code for a nested list is shown below.

<ul type=square>
<li>This is the first item in the list.
    <ul type=disc>
    <li>This is a nested list.
    <li>These two items are nested within the first item of the outer list.
    </ul>
<li>This is the second item in the list.
<li>This is the last item in the list.
</ul>

The above code is rendered as follows.

Different types of list may be nested within each other. The compact attribute of the tag <ul> is meant to compress the display of items within an unordered list. Depending on how your browser renders unordered lists, the compact attribute may or may not influence the appearance of a list. If you are curious, you can write a simple HTML document to see whether there is a difference.

Ordered Lists

Ordered lists are also quite simple to code. The following example shows an ordered list.

<ol>
<li>This is the first item in the list.
<li>This is the second item in the list.
<li>This is the last item in the list.
</ol>

which is rendered as follows.

  1. This is the first item in the list.
  2. This is the second item in the list.
  3. This is the last of item in the list.

The tag <ol> has two attributes, one for adjusting the start ordinal of the list and the other for adjusting the numbering scheme of the list. The following code demonstrates both of these attributes in action.

<ol type=a start=24>
<li>This is the first item in the list.
<li>This is the second item in the list.
<li>This is the third item in the list.
<li>This is the fourth item in the list.
<li>This is the last item in the list.
</ol>

which is rendered as follows.

  1. This is the first item in the list.
  2. This is the second item in the list.
  3. This is the third item in the list.
  4. This is the fourth item in the list.
  5. This is the last item in the list.

Roman numerals can also be used:

<ol type=i start=998>
<li>This is the first item in the list.
<li>This is the second item in the list.
<li>This is the third item in the list.
<li>This is the fourth item in the list.
<li>This is the last item in the list.
</ol>

which is rendered as follows:

  1. This is the first item in the list.
  2. This is the second item in the list.
  3. This is the third item in the list.
  4. This is the fourth item in the list.
  5. This is the last item in the list.

although, the choice of starting ordinal is probably inappropriate for this case.

Definition Lists

Each item in a definition list consists of a definition term and a definition description (with associated tags <dt> and <dd>). The tag <dl> initiates the specification of a definition list. Below is shown an example of a definition list.

<dl>
<dt>Sunday
<dd>The first day of the week.
<dt>January
<dd>The first month of the year.
<dt>Benedict McNamara
<dd>The company that owns the trademark 5Trees<sup>®</sup>.
</dl>

The above code fragment displays as shown below.

Sunday
The first day of the week.
January
The first month of the year.
Benedict McNamara
The company that owns trademark 5Trees®.

Other List Types

There are two other types of list that are present in the definition of HTML. These are menu lists and directory lists. Both of these lists resemble unordered lists. Like unordered lists, both menu lists and directory lists use the tag <li> to insert items into the list. Menu and directory lists are rarely used and may eventually be dropped from the HTML specification.

The next chapter next.gif presents the topics required to allow your documents to link to other documents, either locally or anywhere on the world wide web.