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:
• HTML5 role Attribute
• HTML Bulleted or Unordered List
• Introduction to HTML
• Easy Code to Add Bing Site Search to Your Website
• HTML abbr and acronym Tag
• HTML5 Nav Element
• Block and Inline HTML Elements
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• HTML Select List Basics
• How to Debug HTML