Writing HTML | About | Index | previous | next |

Descriptive Lists

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

Objectives

After this lesson you will be able to:

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 WWW 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 defintions, but for our example we will use it to create a short bibliography for our Volcanoes! lesson:

  1. Open the HTML file, Volc.html in your text editor.
  2. 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
  3. Save and Reload into your WWW 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:
  1. How does the descriptive list differ from the ordered and unordered lists?
  2. In what instances might you use a descriptive list?
  3. 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
Sulfates
Metal ions combine with the Sulfate ion (SO4), atomic structure sometimes can allow bonding of water molecules
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, magentic mineral)
    <li>Corundom (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 | previous lesson "Special Characters" | next lesson "Address Footers and E-Mail Links" |

Writing HTML Lesson 11: Descriptive Lists
©1995 Maricopa Center for Learning & Instruction (MCLI)
Maricopa County Community College District, Arizona

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