Next: Highlighting Up: The document body Previous: Special characters

List elements

There are a number of HTML elements for defining different types of list within the document body:

• Unordered lists (UL)
• Ordered lists (OL)
• Definition lists (DL)
• Directory lists (DIR)
• Menus (MENU).

Lists may be nested and different types of list may be nested within each other.

Unordered lists are displayed as lists of bullet items. Individual items within a list can be quite large - up to several paragraphs, and may contain elements such as images, hypertext links or other lists. Each list item is identified by an LI element. The </LI> end tag is optional and in fact some browsers do not recognize it.

For example, the HTML

    Plant Classification:
    <UL>
    <LI> annuals
    <LI> biennials
    <LI> perennials
    </UL>

would appear as:

Plant Classification:

• annuals
• biennials
• perennials

Ordered lists are displayed as lists of numbered items. Each list item is identified by an LI element, as with unordered lists. The items are numbered automatically by the browser and the lists can be nested. Exactly how nested numbered lists are displayed is determined by the browser.

For example the HTML:

    The Seasons:
    <OL>
    <LI> Spring
    <LI> Summer
    <LI> Autumn
    <LI> Winter
    </OL>

would be displayed as:

The Seasons:

1. Spring
2. Summer
3. Autumn
4. Winter

Both menu lists and directory lists are variants of unordered lists, and are intended for lists of short items that can be displayed in a compact style. The items on a menu list are frequently set up as hypertext links to create the functionality of a menu. Each menu list item should be a single line and a directory list item should not be longer than 20 characters. Some browsers display menu or directory lists in the same way as unordered lists, while others display them without the bullets that are characteristic of unordered lists.

  <H1>Table of Contents</H1>

  <MENU>
  <LI> <A HREF="#section1">Section 1</A>
  <LI> <A HREF="#section2">Section 2</A>
  <LI> <A HREF="#section3">Section 3</A>
  </MENU>  

Definition lists are intended for lists of terms and their definitions. The term is preceded by a <DT> tag and the definition by a <DD> tag. It is permissible to have a number of terms preceding one definition. Definition lists are often used for glossaries, for example. The following example illustrates the use of description lists:

    <TITLE>Parts of a plant</TITLE>
    <H2>Parts of a plant</H2>

    <DL>
    <DT> Bract
    <DD> Leaf below the <EM>calyx</EM>.
    <DT> Calyx
    <DD> Circle of leaf-like material which forms the outer case
         of a flower bud.
    <DT> Petiole
    <DD> The stalk joining a leaf to a stem.
    <DT> Spadix
    <DD> Closely arranged spike of flowers, usually enclosed by a
         <EM>spathe</EM>.
    <DT> Spathe
    <DD> Large <EM>bract</EM> or pair of bracts enclosing the 
         <EM>spadix</EM>.
    </DL>

This would be displayed as:

Parts of a plant

Bract

Leaf below the calyx.

Calyx

Circle of leaf-like material which forms the outer case of a flower bud.

Petiole

The stalk joining a leaf to a stem.

Spadix

Closely arranged spike of flowers, usually enclosed by a spathe.

Spathe

Large bract or pair of bracts enclosing the spadix.

The COMPACT attribute can be specified in the <DL> tag to suggest that the browser should display the definition list in a compact form, minimizing the amount of space between successive pairs of items. It may also reduce the width of the term (DT) column.

    <TITLE>Trees and Shrubs</TITLE>
    <H2>Trees and Shrubs</H2>

    <DL COMPACT>
    <DT> <IMG SRC="images/deciduous.xbm">
    <DD> Quercus robur: the common oak, 
    large deciduous tree.

    <DT> <IMG SRC="images/conifer.xbm">
    <DD> Metasequoia glyptostroboides: 
    the dawn redwood, vigorous conifer.

    <DT> <IMG SRC="images/evergreen-shrub.xbm">
    <DD> Choisya ternata: the Mexican orange 
    blossom, evergreen shrub.

    <DT> <IMG SRC="images/decid-shrub.xbm">
    <DD> Philadelphus delavayi: mock orange,
    large deciduous shrub.
    </DL>

This would be displayed as:

Trees and Shrubs

Quercus robur: the common oak, large deciduous tree.

Metasequoia glyptostroboides: the dawn redwood, vigorous conifer.

Choisya ternata: the Mexican orange blossom, evergreen shrub.

Philadelphus delavayi: mock orange, large deciduous shrub.

Definition lists can be used to create fancy bullet lists using an icon in each DT element, as shown in Figures and . Purists consider this to be a misuse of the construct, but currently there is no other way to achieve this effect within HTML.

Spinning the Web by Andrew Ford
© 1995 International Thomson Publishing
© 2002 Andrew Ford and Ford & Mason Ltd
Note: this HTML document was generated in December 1994 directly from the LaTeX source files using LaTeX2HTML. It was formatted into our standard page layout using the Template Toolkit. The document is mainly of historical interest as obviously many of the sites mentioned have long since disappeared.