Menu
HTML Definition List

One of the most common structures found on a webpage is a list. A list can be used to organize and clarify information. There are three kinds of lists; the ordered list, which in which every item is preceded by a number or letter, the unordered list which is commonly known as the bulleted list, and the definition list which has two parts for each item, the term and the definition.

The definition list is defined by the <dl> </dl> tag pair. The definition list is used to display a list of terms and descriptions or definitions of each term. In a definition list, the terms are defined by <dt> </dt> tag pairs and the related definitions are defined by <dd> </dd> tag pairs. The definitions are automatically indented by the browser.

Shown below is code for a definition list:

<dl>
<dt>Term 1</dt>
<dd>Definition for term 1</dd>
<dt>Term 2</dt>
<dd>Definition for term 2</dd>
<dt>Term 3</dt>
<dd>Definition for term 3</dd>
</dl>
Term 1
Definition for term 1
Term 2
Definition for term 2
Term 3
Definition for term 3

A Definition List Can Have Multiple Terms for Single Definition

Shown below, a definition list with multiple terms is used to define some synonyms.

Division
Part
Section
One of the portions into which something is divided
Amaze
Astonish
Astound
To surprise or affect with great wonder
<dl>
<dt>Division</dt>
<dt>Part</dt>
<dt>Section</dt>
<dd>One of the portions into which something is divided</dd>
<dt>amaze</dt>
<dt>astonish</dt>
<dt>astound</dt>
<dd>To surprise or affect with great wonder</dd>
</dl>

A Definition List Can Have Multiple Definitions for Single Term

Shown below, is a definition list with multiple definitions for each term.

Center
To position in the middle
Political view between right and left
Equal distance from circumference
Even
Flat
Smooth
Uniform
<dl>
<dt>Center</dt>
<dd>To position in the middle</dd>
<dd>Political view between right and left</dd>
<dd>Equal distance from circumference</dd>
<dt>Even</dt>
<dd>Flat</dd>
<dd>Smooth</dd>
<dd>Uniform</dd>
</dl>

Put Border Around Definition List

Unfortunately, pure HTML has no attribute for setting the width or putting a border around a definition list. One pure HTML method to accomplish this is to nest the definition list inside a table and set the width and border attributes of the table, as shown below.

Term 1
Definition for term 1
Term 2
Definition for term 2
Term 3
Definition for term 3
<table width="200" border="1"><tr><td>
<dl>
<dt>Term 1</dt>
<dd>Definition for term 1</dd>
<dt>Term 2</dt>
<dd>Definition for term 2</dd>
<dt>Term 3</dt>
<dd>Definition for term 3</dd>
</dl>
</td></tr></table>

If you mind using a style attribute, the example shown below uses style to set the width and give the definition list a nice double border.

Term 1
Definition for term 1
Term 2
Definition for term 2
Term 3
Definition for term 3
<dl style="width:200px; padding:4px; border-width:3px; border-style:double;">
<dt>Term 1</dt>
<dd>Definition for term 1</dd>
<dt>Term 2</dt>
<dd>Definition for term 2</dd>
<dt>Term 3</dt>
<dd>Definition for term 3</dd>
</dl>


Learn more at amazon.com

More HTML Code:
• Keywords Meta Tag Generator
• How to Troubleshoot an HTML Table
• Make an HTML Element Editable
• When to Use the nofollow Attribute value
• HTML List Basics
• The HTML Head Tag
• HTML5 Input Type - Email
• Text Features
• Use fieldset to Organize Form Elements
• Text Input Box Basics