Lesson 19: Definition Lists

Overview

In this HTML lesson, we demonstrate how to make definition lists. We begin with a basic example of a defintion list, where each term element is followed by its description element. Next, we give an example of a list of words with several definitions for each word; this is typical for commonly used words. Then we have a list of technical terms that includes the use of HTML entities. After this, we show the flexibility of definition lists by using one to create a list of concepts and explanations for which we provide some additional formatting. Finally, we use a definition list to represent a list of questions, answers, and citations.

Basic Lists

Definition lists are made up of a series of terms and definitions. The main definition list tag is specified by dl for definition list. Inside the definition list element, there are term elements specified by dt for definition term and descriptions specified by dd for definition description. In a basic list, each term is followed by a description that defines the term, as we see with the list of chemistry terms below. Unlike the ordered and unordered lists, there are no li or list item elements in definition lists.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <dl>
      <dt>Mass</dt>
        <dd>The measure of a quantity of matter</dd>
      <dt>Matter</dt>
        <dd>Something that has mass and occupies space</dd>
      <dt>Molecule</dt>
        <dd>A particle that is formed by binding together more than one atom</dd>
      <dt>Compound</dt>
        <dd>A compound is a substance composed of fixed proportions of multiple elements</dd>
      <dt>Reactants</dt>
        <dd>Substances that enter into a reaction</dd>
      <dt>Products</dt>
        <dd>Substances that are formed in a reaction</dd>
    </dl>
  </body>
</html>

Output

Multiple Definitions

It is possible to have multiple definitions for each term in a definition list. Common words typically have many definitions listed for them in the dictionary. In this list, we have the terms "can" and "make" followed by five and four definitions, respectively. Note that the list is somewhat cluttered because it is not clear that there are multiple definitions or how many there are; we will talk about how to clean this up when we cover nested lists.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <dl>
      <dt>can</dt>
        <dd>to have the ability</dd>
        <dd>to be possible</dd>
        <dd>to be permitted</dd>
        <dd>to have the power</dd>
        <dd>a cylindrical metal container</dd>
      <dt>make</dt>
        <dd>to fashion into being</dd>
        <dd>to put together</dd>
        <dd>to cause to exist</dd>
        <dd>to cause to become</dd>
    </dl>
  </body>
</html>

Output

Technical Definitions

This example is a list of technical mathematical terms and their definitions. These definitions employ many HTML entities.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <dl>
      <dt>Bounded</dt>
        <dd>A function <b>f</b> from a set <b>A</b> &sub; &reals; into &reals; is bounded
        if there exists M &in; &reals; such that &vert;<b>f</b>(<b>x</b>)&vert; &le; M for
        all <b>x</b> &in; <b>A</b>.</dd>
      <dt>Continuity at a point</dt>
        <dd>A function <b>f</b> from a set <b>A</b> &sub; &reals; into &reals; is continuous
        at a point <b>p</b> &in; <b>A</b> if for every &epsilon; > 0 there exists &delta; > 0
        such that &vert;<b>f</b>(<b>x</b>) - <b>f</b>(<b>p</b>)&vert; < &epsilon; for all
        <b>x</b> &in; <b>A</b> with &vert;<b>x</b> - <b>p</b>&vert; < &delta;.</dd>
      <dt>Uniform continuity</dt>
        <dd>A function <b>f</b> from a set <b>A</b> &sub; &reals; into &reals; is uniformly
        continuous on <b>A</b> for every &epsilon; > 0 there exists &delta; > 0 such that
        <b>x</b>, <b>y</b> &in; <b>A</b> and &vert;<b>x</b> - <b>y</b>&vert; < &delta; imply
        &vert;<b>f</b>(<b>x</b>) - <b>f</b>(<b>p</b>)&vert; < &epsilon;.</dd>
    </dl>
  </body>
</html>

Output

Other Uses

Definition lists need not be confined to definitions. In this example, we list sacraments and their meanings in a list. Since the blocks of text in the description are large, this appears messy by default. So, we have added in horizontal rules and line breaks to clean up the list.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <dl>
      <dt>THE SACRAMENT OF BAPTISM</dt>
      <hr />
        <dd> Holy Baptism is the basis of the whole Christian life, the gateway to life in the
        Spirit (vitae spiritualis ianua) and the door which gives access to the other sacraments.
        Through Baptism we are freed from sin and reborn as sons of God; we become members of
        Christ, are incorporated into the Church and made sharers in her mission: "Baptism is the
        sacrament of regeneration through water in the word.</dd>
      <br />
      <dt>THE SACRAMENT OF CONFIRMATION</dt>
      <hr />
        <dd>Baptism, the Eucharist, and the sacrament of Confirmation together constitute the
        "sacraments of Christian initiation," whose unity must be safeguarded. It must be explained
        to the faithful that the reception of the sacrament of Confirmation is necessary for the
        completion of baptismal grace. For "by the sacrament of Confirmation, [the baptized] are
        more perfectly bound to the Church and are enriched with a special strength of the Holy
        Spirit. Hence they are, as true witnesses of Christ, more strictly obliged to spread and
        defend the faith by word and deed."</dd>
      <br />
      <dt>THE SACRAMENT OF THE EUCHARIST</dt>
      <hr />
        <dd>The holy Eucharist completes Christian initiation. Those who have been raised to the
        dignity of the royal priesthood by Baptism and configured more deeply to Christ by
        Confirmation participate with the whole community in the Lord's own sacrifice by means of
        the Eucharist.</dd>
      <br />
    </dl>
  </body>
</html>

Output

Questions and Answers

In this list, our terms are questions. There are two descriptions that follow each question. The first is the answer and the second is the biblical citation that justifies the answer.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <dl>
      <dt>1. Who made us?</dt>
        <dd>God made us.</dd>
        <dd><i>In the beginning, God created heaven and earth. (Genesis 1:1)</i></dd>
      <dt>2. Who is God?</dt>
        <dd>God is the Supreme Being, infinitely perfect, who made all things and keeps them in
        existence.</dd>
        <dd><i>In him we live and move and have our being. (Acts 17:28)</i></dd>
      <dt>3. Why did God make us?</dt>
        <dd>God made us to show forth His goodness and to share with us His everlasting happiness in
        heaven.</dd>
        <dd><i>Eye has not seen nor ear heard, nor has it entered into the heart of man, what things
        God has prepared for those who love him. (I Corinthians 2:9)</i></dd>
    </dl>
  </body>
</html>