Definition ListsS2C Home « Definition Lists

In HTML5 Basic Tutorials - Lesson 6 - Ordered and Unordered Lists we showed how to create ordered and unordered lists.

In this lesson we introduce the definition list which is commonly used for glossaries, lists of terms etc. and can include pictures, movies and other multimedia entries.

In this lesson we introduce the <dd>, <dl> and <dt> tags which finishes our exploration of the lists available in HTML.

The Definition Description Element

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

The Definition List Element

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

The Definition Term Element

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

Creating A Webpage

Lets create a webpage for our definition lists to see what they do!

  1. HTML Editor

    1. Open up your HTML editor or text editor, which in my case is Notepad++.
    2. Open a document if required.
    3. Copy and paste the following code into the document.
    
<!DOCTYPE html>
<!-- Using the dd, dl and dt HTML tags -->
<html lang="en">
  <head>
    <title>
      Further Into Semantics
    </title>
    <meta charset="utf-8">
  </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.webp"
                 alt="Chicken Pie" width="75" height="50" /> </dd> 
        <dd><img src="http://htmldoctor.info/images/fishpiesmall.webp"
                 alt="Fish Pie" width="75" height="50" /> </dd>
        <dd><img src="http://htmldoctor.info/images/shepherdspiesmall.webp"
                 alt="Shepherds Pie" width="75" height="50" /> </dd>
    </dl>
  </body>
</html>

  2. Saving the document

    Save the file as deflists.html

    save definition lists tags
    Screenshot 1. Saving the deflists.html HTML file.

  3. View Page in Web Browser

    Either navigate to the location you saved the deflists.html file to and double click the file. This will take you to the page in your default web browser, or from your web browser click File --> Open File and navigate to the file and open it.

    After doing either of these you should see a similar webpage in your browser to the following screenshot:

    view definition lists tags
    Screenshot 2. Viewing the deflists.html HTML file.

    As you can see from the screenshot the image shows various usages of definition lists.

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

    Just using the <dl></dl> element creates an empty definition list.

    The <dt> tag must be followed by either another <dt> tag or one or more <dd> tags and these must be enclosed within a <dl> tag.

    The <dd> tag must be preceded with a <dt> tag and both these tags must be enclosed within a <dl> tag.

Lesson 6 Complete

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

Related Tutorials/Quizzes

HTML5 Basic Tutorials - Lesson 7 - Ordered and Unordered Lists

CSS Advanced Tutorials - Lesson 3 - Styling Lists

Definition Lists Quiz

What's Next?

We finish off our discussions about links.

HTML5 Reference

The <dd> definition description tag

The <dl> definition list tag

The <dt> definition term tag