Writing HTML | About | FAQ | Alumni | Tags | Index | back | next |

11. Descriptive Lists

Yet another more variety of lists, lists, lists....

Objectives

After this lesson you will be able to:

build a list of items with indented text block descriptions.
create a bibliography with a descriptive list

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

In lesson 6 we saw how to create two types of lists: ordered <ol>...</ol> and unordered <ul>...</ul>. We now introduce a third variety, the descriptive list. Unlike the lists we have seen earlier, the descriptive list marks its entries not with a bullet marker or a number, but by its pattern of indentation.

The format for a descriptive list tag is:

<dl>
<dt> description title1
<dd> description description1
<dt> description title2
<dd> description description2
                :
                :
                :
<dt> description titleN
<dd> description descriptionN
</dl>

The <dl> .... </dl>; tags include alternating pairs of description titles <dt> and descriptions <dd> A Web browser will typically generate the list with each description indented to offset it from the title.

As viewed in a web browser, the above example looks like this:

description title1: description description1
description title2: description description2
:
:
description titleN: description descriptionN

The descriptive list might be used as a glossary of definitions, but for our example we will use it to create a short bibliography for our Volcano Web lesson:

Open the HTML file, index.htm in your text editor.

After the unordered list under the heading References enter the following:

<h3>Bibliography</h3>
Check your library for these books:
<dl>
<dt>Cas, R.A.F. and Wright, J. V. (1987). 
<dd><I>Volcanic Successions: Modern and Ancient.</I> 
London: Allen &amp; Unwin.

<dt>La Croix, A. (1904)
<dd><I>La Montagna Pel&eacute;e et ses &Eacute;ruptions.</I>
Paris: Masson

<dt>Lipman, P.W. and Mullineaux (eds). (1981)
<dd><I>The 1980 Eruptions of Mount St. Helens, Washington.</I>
U.S. Geological Survey Professional Paper 1250.
</dl>

NOTE: We have used some of the Special Characters for the ampersand symbol ("&") in the first reference and for the accent marks in the second reference. If you are unfamiliar with the HTML special characters, see lesson 10

Save and Reload into your web browser.

Check Your Work

Compare your document with a sample of how this document should appear. If your document was different than the sample, review the text you entered in the text editor. Do not forget the <dl>... </dl> tags that mark the whole list. One common mistake is switching the <dt> and <dd> tags.

Review

Review topics for this lesson:

How does the descriptive list differ from the ordered and unordered lists?
In what instances might you use a descriptive list?
What is the difference between the <dt> and the <dd> tags?

Independent Practice

Use a descriptive list to add a glossary or bibliography to your own HTML page.

More Information

You can include other ordered/unordered lists within a descriptive list. For example, lets say we are making a list of the major mineral groups, with a description of its characteristics, and a sublist of minerals in each group and how it is used in society. We wish it to look like (just a few entries are shown):

Oxides

Combinations of metal ions with Oxygen, comprises the major ores extracted in mining operations

Hematite (iron ore)
Magnetite (iron ore, magnetic mineral)
Corundum (gemstone, abrasive)

Sulfates

Metal ions combine with the Sulfate ion (SO4), atomic structure sometimes can allow bonding of water molecules

Gypsum (plaster)
Barite (drilling mud)

The HTML to produce this is:

<dl>
<dt><b>Oxides</b>
<dd>Combinations of metal ions with Oxygen, comprises the major ores
extracted in mining operations
    <ul>
    <li>Hematite (iron ore)
    <li>Magnetite (iron ore, magnetic mineral)
    <li>Corundum (gemstone, abrasive)
    </ul>
<dt><b>Sulfates</b>
<dd>Metal ions combines with the Sulfate ion (SO4), atomic structure
sometimes can allow bonding of water molecules
    <ul>
    <li>Gypsum (plaster)
    <li>Barite (drilling mud)
    </ul>
</dl>

Coming Next....

Add an informative "signature" with a link for sending e-mail

GO TO.... | Lesson Index | back: "Special Characters" | next: "Address Footers and E-Mail Links" |

Writing HTML Lesson 11: Descriptive Lists

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut11.htm