Definition List in HTML | Description List, Example
Definition list (also known as description list) in HTML slightly differs from the other two lists that we discussed in the previous tutorial. Each list item in a definition list has two parts:
- A term
- The term’s definition
Thus, the definition list is a list of items (terms), with a description or definition of each item (term) on separate lines. We use the definition list for any type of name/value pair, such as terms and their definitions, FAQs, dictionaries, or other types of terms and their associated information.
How to Create a Definition List or Description List in HTML?
We can create a description list or definition list in HTML using a <dl> tag (definition list) that defines the start of the definition list. Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description). The tags <dt> and <dd> usually occur in pairs. However, the end tags are </dt> and </dd> that are optional for the most browsers.
The basic syntax to create a definition list in html is as:
<dl> <dt>Term 1</dt> <dd>Description for Term 1</dd> <dt>Term 2</dt> <dd>Description for Term 2</dd> </dl>
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Definition List Example</title>
</head>
<body>
<p>HTML Description List Example</p>
<dl>
<!-- Term 1 -->
<dt>HTML</dt>
<!-- Definition of Term 1 -->
<dd>- Hypertext Markup Language - the standard markup language</dd>
<!-- Term 2 -->
<dt>CSS</dt>
<!-- Definition of Term 2 -->
<dd>- Cascading Style Sheets - a style sheet language</dd>
<!-- Term 3 -->
<dt>JavaScript</dt>
<!-- Definition of Term 3 -->
<dd>- A scripting language</dd>
</dl>
</body>
</html>
Output:
In this example, we have a definition list that includes three terms: HTML, CSS, and JavaScript. Each term is followed by its definition. The <dl>…</dl> tags define the whole definition list. The <dt> tag defines each term, and <dd> tag defines the description or definition of the term listed with <dt> tag.
Customizing Description List
We can customize a definition list in HTML using CSS (Cascading Style Sheets) to style the elements <dl>, <dt>, and <dd>. Below is an example that exhibits how to customize the appearance of a definition list that includes terms with their definitions. The customizations include font changes, color, spacing, and borders.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Description List Example</title>
<style>
/* Style for the definition list */
dl {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 20px;
}
/* Style for the term (dt) */
dt {
font-weight: bold;
color: #333;
margin-top: 20px; /* Add space above each term if it's not the first */
}
/* Style for the definition (dd) */
dd {
margin-left: 20px;
color: #666;
}
/* Optional: Style the first term differently */
dt:first-child {
margin-top: 0; /* Removes the top margin for the first term */
}
</style>
</head>
<body>
<p><strong>HTML Description List Example</strong></p>
<dl>
<!-- Term 1 -->
<dt>HTML</dt>
<!-- Definition of Term 1 -->
<dd>- Hypertext Markup Language</dd>
<!-- Term 2 -->
<dt>CSS</dt>
<!-- Definition of Term 2 -->
<dd>- Cascading Style Sheets</dd>
<!-- Term 3 -->
<dt>PHP</dt>
<!-- Definition of Term 3 -->
<dd>- Hypertext Preprocessor</dd>
</dl>
</body>
</html>
Output:
In this example, we have customized the HTML definition list using CSS. It adds a light grey background to the entire definition list, defines a border around it, and adds padding inside it for better spacing.
Each term (<dt>) is styled to be bold. It has a top margin to separate it from the previous definition, except for the first term where the top margin is removed to align it nicely at the top of the list.
Each definition (<dd>) has a left margin to indent it slightly from its term, making the association between terms and definitions visually clearer. Additionally, we have customized the color of the terms and definitions for better readability.
In this tutorial, we have explained how to create and customize a description list in HTML with the help of various examples. Hope that you will have understood the basic concepts and practiced all example coding.
Happy coding!!!
