Writing HTML | About | FAQ | Alumni | References | Tags | Lessons | back | next |

11. Definition Lists

Yet another variety of

lists
- lists
  - lists...

Objectives

After this lesson you will be able to:

build a list of items with indented text block definitions.
create a bibliography with a definition 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 definition list. Unlike the lists we have seen earlier, the definition list marks its entries not with a bullet marker or a number, but by its pattern of indentation.

The format for a definition list tag is:


<dl>
<dt>  title1
<dd>  definition1
<dt>  title2
<dd>  definition2
                :
                :
                :
<dt>  titleN
<dd>  definitionN
</dl>

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

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

title1
definition1
title2
definition2
:
:
titleN
definitionN

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

Open the HTML file, index.html 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 from 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 definition list differ from the ordered and unordered lists?
In what instances might you use a definition list?
What is the difference between the <dt> and the <dd> tags?

Independent Practice

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

More Information

You can include other ordered/unordered lists within a definition list. For example, let's say we are making a list of the major mineral groups, with a description of their characteristics, and a sublist of minerals in each group and how they are 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: Definition Lists

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

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