Lists

The two most commonly used list types used in web pages are ordered (numbered) lists and unordered (bulleted) lists. An ordered list is created using the <ol> . . . </ol> tagset. An example is shown below.


<html>

<head>
  <title>Ordered List</title>
</head>

<body>

<p>My "to do" list:</p>

<ol>
  <li>Feed cats</li>
  <li>Mow lawn</li>
  <li>Make appointment with optician</li>
  <li>Go to bank</li>
  <li>Collect dry cleaning</li>
</ol>

</body>

</html>


The above code produces the following display in a browser window:


An ordered list

An ordered list


The same list could be represented as an unordered list by using the <ul> . . . </ul> tagset instead, as shown below.


<html>

<head>
  <title>Unordered List</title>
</head>

<body>

<p>My "to do"list:</p>

<ul>
  <li>Feed cats</li>
  <li>Mow lawn</li>
  <li>Make appointment with optician</li>
  <li>Go to bank</li>
  <li>Collect dry cleaning</li>
</ul>

</body>

</html>


The above code produces the following display in a browser window:


An unordered list

An unordered list


You can nest HTML elements within a list item tagset, including images, line breaks, and even other lists. The example below demonstrates how this facility might be used.


<html>
<head>
  <title>Nested List</title>
</head>

<body>

<p>Pets:</p>

<ul>
  <li>Cats<br />
    <img src="images\cat.jpg" />
    <ul>
      <li>"Tiddles"</li>
      <li>"Charlie"</li>
      <li>"Felix"</li>
    </ul>
  </li>
  <li>Dog ("Spot")</li>
  <li>Rabit ("Roger")</li>
  <li>Gerbil ("Gerald")</li>
</ul>

</body>
</html>


The above code produces the following display in a browser window:


A list with an embedded image and a nested list

A list with an embedded image and a nested list


Another, not so commonly used, list type is the definition list. The definition list us defined using the <dl> . . . </dl> tagset. Each list item consists of two different types of object – the definition term (enclosed within the <dt> . . . </dt> tagset), and the definition description (enclosed within the <dd> . . . </dd> tagset). The following simple example demonstrates how a definition list might me used:


<html>
<head>
  <title>Definition List</title>
</head>

<body>

<p>Types of pet:</p>

<dl>
  <dt>Felis catus</dt>
  <dd>domestic cat - a small, predatory feline mammal.</dd>
  <dt>Canis lupus familiaris</dt>
  <dd>domestic dog - a subspecies of the gray wolf.</dd>
</dl>

</body>
</html>


As with the list item tagset, you can nest other HTML elements within a definition description tagset. The above code produces the following display in a browser window:


A simple definition list

A simple definition list


Although the data presented by a definition list can be displayed in pretty much the same format using other HTML elements for marking up the text, and would thus appear more or less the same from a human perspective, the semantics (meaning and purpose) of definition list elements are recognised by search engine software and content management systems, and distinguish them from other types of data. Thus, although using definition lists where appropriate might at first seem somewhat pedantic, it can add value to a web page by ensuring that the page content can be processed using automated methods (indeed, the correct use of markup generally should result in data that is appropriately structured within a given context). The structure of the definition list is also quite flexible in that it allows the following relationships between definition terms and definition descriptions:

<dl>
  <dt>Centre-forward</dt>
  <dt>Striker</dt>
  <dd>the primary goal-scorer in a football team.</dd>
</dl>

<dl>
  <dt>Cap</dt>
  <dd>a tightly-fitting hat.</dd>
  <dd>a cover for a container (e.g. a bottle-top).</dd>
  <dd>a detonator for an explosive device.</dd>
  <dd>a fixed maximum value (e.g. quota).</dd>
  <dd>an artificial covering for a tooth (e.g. crown).</dd>
</dl>

<dl>
  <dt>Bucket</dt>
  <dt>Pail</dt>
  <dd>an open-top container used to carry liquids.</dd>
  <dd>a vessel used to draw water (e.g. from a well).</dd>
  <dd>a watertight open top container with a handle.</dd>
</dl>

The code below creates a web page that demonstrates the use of the various options for the structure of a definition list.


<html>
<head>
  <title>Definition List Structures</title>
</head>

<body>

<p>The structure of the definition list is flexible in terms of the relationships that are possible between definition terms and definition descriptions:</p>

<hr />

<dl>
  <dt>Centre-forward</dt>
  <dt>Striker</dt>
  <dd>the primary goal-scorer in a football team.</dd>
</dl>

<hr />

<dl>
  <dt>Cap</dt>
  <dd>a tightly-fitting hat.</dd>
  <dd>a cover for a container (e.g. a bottle-top).</dd>
  <dd>a detonator for an explosive device.</dd>
  <dd>a fixed maximum value (e.g. quota).</dd>
  <dd>an artificial covering for a tooth (e.g. crown).</dd>
</dl>

<hr />

<dl>
  <dt>Bucket</dt>
  <dt>Pail</dt>
  <dd>an open-top container used to carry liquids.</dd>
  <dd>a vessel used to draw water (e.g. from a well).</dd>
  <dd>a watertight open top container with a handle.</dd>
</dl>

</body>
</html>


Here is what the page looks like:


Definition lists can be structured in a number of ways

Definition lists can be structured in a number of ways