Definition ListsS2C Home « Definition Lists

In Lesson 6 of the Basic HTML Tutorials we showed how to create ordered and unordered lists. In this lesson we introduce our final list, the definition list. Definition lists are commonly used for glossaries, lists of terms and similar lists and can include pictures, movies and other multimedia entries.

The <dl> Tag

The <dl> tag and its' closing </dl> tag are used to define the definition list.

The <dt> Tag

The <dt> tag and its' closing </dt> tag are used to define a definition term.

The <dd> Tag

The <dd> tag and its' closing </dd> tag are used to define a definition description of the definition term.

Viewing the Tags

Let's take a look at some definition lists and see their usages.

Open the file with Notepad we created and tested in Lesson: 3 Formatting Text

You saved the file to your computer in the C:\_HTMLIntermediate folder as lesson_3_webpage.html

Copy and paste the following code into the reopened file, overwriting the existing contents.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML Tutorials - Intermediate HTML Lesson 4 - Definition Lists
</title>
</head>
<body>
<!-- Some Definition Lists -->
<h2>Definition Lists</h2>
<h3>A Glossary</h3>
<dl>
  <dt>Boys Names</dt>
    <dd>Pugh</dd>
    <dd>Hugh</dd>
  <dt>Girls Names</dt>
    <dd>Charlotte</dd>
    <dd>Emily</dd>
    <dd>Jane</dd>
</dl>
<h3>List OF Terms</h3>
<dl>
  <dt>Football</dt>
    <dd></dd>
    <dd>Spherical object</dd>
    <dd>A game of two halves</dd>
    <dd>A sport</dd>
</dl>
<h3>List OF Images</h3>
<dl>
  <dt>Pie Pictures</dt>
    <dd><img src="http://htmldoctor.info/images/chickenpiesmall.jpg"
             alt="Chicken Pie" width="75" height="50" /> </dd> 
    <dd><img src="http://htmldoctor.info/images/fishpiesmall.jpg"
             alt="Fish Pie" width="75" height="50" /> </dd>
    <dd><img src="http://htmldoctor.info/images/shepherdspiesmall.jpg"
             alt="Shepherds Pie" width="75" height="50" /> </dd>
</dl>
</body>
</html>

Save the file in the C:\_HTMLIntermediate folder as lesson_4_webpage.html and close the Notepad.

save defintion lists

Viewing Our Changed File

From the C:\_HTMLIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

defintion lists

Reviewing Our Changes

Use definition lists whenever you want to create a glossary, list of items, name/value pairs or include multimedia content in your lists.

Lesson 4 Complete

Modify the HTML to make your own definition lists to get confident with how these lists work.

Related Tutorials

HTML4 Basic Tutorials - Lesson 6 - Ordered and Unordered Lists

CSS Advanced Tutorials - Lesson 3 - Styling Lists

What's Next?

We finish off our discussions about links.

HTML4 Reference

The <dd> definition description tag

The <dl> definition list tag

The <dt> definition term tag

go to home page Homepage go to top of page Top