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.
|
<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>
More HTML Code:
• Radio Button Basics
• HTML Definition List
• Webpage DOCTYPE Declarations Explained
• Code For a Basic 2-Column Fluid Webpage Layout
• Changing the Size of an Image on Your Webpage
• Use an Image as a Form Submit Button
• HTML5 Input Type - Email
• HTML abbr and acronym Tag
• Set Form Controls Tab Order With tabindex Attribute
• HTML SPAN Basics