html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Intermediate

Lesson 4 - Defintion 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 the such 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 - Defintion 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.

notepad

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.

notepad

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 1/2 Advanced Tutorials - Lesson 3 - Styling Lists

What's Next?

We finish off our discussions about links.



Formatting Text  << Prev          Next >>  More 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

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>