Cafe LaTe Home
Contents
Background
Getting Started
Images
Links
Tables
Lists
Resources
Tag Index
Definition Lists

Section VI: HTML Lists
   Lesson 6-3: Definition Lists

    In this lesson you will learn how to create a third type of HTML list - the definition list. Sometimes you may want to create lists of words and their definitions. In a book, such a list is called a glossary. Definition lists are sometimes called glossary lists, but the tag used for this element is an abbreviation of "Definition List" - DL. HTML definition lists contain two different kinds of data: words and definitions. Therefore, two different kinds of item tags are needed. Definition lists do not use the LI tag. Words or technical terms are marked with the Definition Term DT tag. Their definitions or descriptions are marked with the Definition Description tag DD. Here is an example of a definition list:

Common Types of Software

Word Processors
Word processing software is probably the most commonly used type of software. It is used to write letters, reports, books, and even web pages.
Spreadsheets
Spreadsheet software is used to store and calculate rows and columns of numbers. Businesses use spreadsheets to keep financial records.
Databases
Database software is used to store data that can be classified into categories. Libraries, for example, keep a record of each book in a database.

   In the source file, the HTML code for this list looks like this:

bCommon Types of Software/bbrbr
dl
dtWord Processors/dt
ddWord processing software is probably the most commonly used type of software. It is used to write letters, reports, books, and even web pages./dd
dtSpreadsheets/dt
ddSpreadsheet software is used to store and calculate rows and columns of numbers. Businesses use spreadsheets to keep financial records./dd
dtDatabases/dt
ddDatabase software is used to store data that can be classified into categories. Libraries, for example, keep a record of each book in a database./dd
/dl


   When you create your source file, you never have to indent. As you can see, indenting is done automatically. You don't have to worry about where the lines wrap (break) either. The browser takes care of this for you automatically, too. Although definition list items are not numbered automatically, you can add numbers yourself, if you like.

   By the way, if you want to add photos or illustrations to your list, you can. Just add image tags wherever you like.



Practice:

   Okay, let's add one more list to your practice file. Open your file in your editor program, and add the list in the following box to the bottom of your page. Then, check the file in your browser.


br
hr
br
bExample Glossary/b
dl
dtbterm/b
dda word which has a special or specific meaning in a certain field or speciality/ddbrbr
dtbdefinition/b
ddthe meaning of a word; an explanation of the meaning of a term/ddbrbr
dtbglossary/b
dda list of difficult words and their definitions or translations/dd
/dl


To see what the result should look like, click here!
To see an improved version, click here!





Review:
  • Lists of terms and definitions, or items and descriptions, can be created with the definition list element. The definition list element tags look like this: DL /DL.
  • LI is not used with definition lists.
  • The definition term tag DT is used to mark terms or item in a definition list.
  • The definition description DD tag is used to mark the definitions or descriptions.
  • Images can be used anywhere in definition lists (and in other types of HTML lists as well).
 


Previous Lesson Next Lesson
 

[Cafe LaTe Home] [Chat Lounge] [Community Center] [Newspaper] [HTML Tutor]



Last revision: 2002/03/04, Copyright © The Three Cities Workshop