Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we add glossary definitions in HTML?
The definition list in HTML is created using the <dl> tag to add glossary definitions and term-description pairs. A definition list consists of terms defined with <dt> (definition term) and their corresponding descriptions using <dd> (definition description) tags.
Definition lists are ideal for glossaries, dictionaries, FAQs, and any content where you need to pair terms with their explanations or definitions.
Syntax
Following is the syntax for creating definition lists in HTML −
<dl> <dt>Term 1</dt> <dd>Description of term 1</dd> <dt>Term 2</dt> <dd>Description of term 2</dd> </dl>
Where −
-
<dl>− Definition list container -
<dt>− Definition term (the word or phrase being defined) -
<dd>− Definition description (the explanation or definition)
Basic Definition List Example
Following example demonstrates how to create a simple glossary using definition lists −
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Web Development Glossary</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - the standard markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - used for describing the presentation of HTML documents.</dd>
<dt>JavaScript</dt>
<dd>A programming language that enables interactive web pages and dynamic content.</dd>
</dl>
</body>
</html>
The output displays terms with their definitions properly formatted −
Web Development Glossary
HTML
HyperText Markup Language - the standard markup language for creating web pages.
CSS
Cascading Style Sheets - used for describing the presentation of HTML documents.
JavaScript
A programming language that enables interactive web pages and dynamic content.
Multiple Definitions for One Term
A single term can have multiple definitions by using multiple <dd> tags after one <dt> tag −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Definitions</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Terms</h2>
<dl>
<dt>Function</dt>
<dd>A reusable block of code that performs a specific task.</dd>
<dd>In mathematics, a relation between a set of inputs and outputs.</dd>
<dt>Variable</dt>
<dd>A storage location with an associated name that contains data.</dd>
</dl>
</body>
</html>
The output shows one term with multiple definitions −
Programming Terms
Function
A reusable block of code that performs a specific task.
In mathematics, a relation between a set of inputs and outputs.
Variable
A storage location with an associated name that contains data.
Styling Definition Lists with CSS
Definition lists can be styled using CSS to create more visually appealing glossaries −
<!DOCTYPE html>
<html>
<head>
<title>Styled Definition List</title>
<style>
dl {
max-width: 600px;
margin: 0 auto;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
}
dt {
font-weight: bold;
color: #2c3e50;
font-size: 18px;
margin-top: 15px;
border-bottom: 2px solid #3498db;
padding-bottom: 5px;
}
dt:first-child {
margin-top: 0;
}
dd {
margin-left: 0;
margin-bottom: 10px;
padding: 10px;
background-color: #f8f9fa;
border-left: 4px solid #3498db;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f4f4f4;">
<h2 style="text-align: center;">HTML Elements Glossary</h2>
<dl>
<dt><div></dt>
<dd>A generic container element used for grouping other HTML elements.</dd>
<dt><span></dt>
<dd>An inline container used to mark up a part of text or document.</dd>
<dt><p></dt>
<dd>Represents a paragraph of text content.</dd>
</dl>
</body>
</html>
The styled definition list appears with enhanced visual formatting, making it easier to read and more professional in appearance.
Nested Definition Lists
Definition lists can be nested within each other to create hierarchical glossaries −
<!DOCTYPE html>
<html>
<head>
<title>Nested Definition Lists</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Web Technologies</h2>
<dl>
<dt>Frontend Technologies</dt>
<dd>Technologies used for client-side development:
<dl>
<dt>HTML</dt>
<dd>Structure and content</dd>
<dt>CSS</dt>
<dd>Styling and layout</dd>
</dl>
</dd>
<dt>Backend Technologies</dt>
<dd>Technologies used for server-side development like PHP, Node.js, Python.</dd>
</dl>
</body>
</html>
This creates a hierarchical structure where sub-terms are nested within main definitions.
Definition List vs Other Lists
Following table compares definition lists with other HTML list types −
| List Type | Tags Used | Purpose | Best Used For |
|---|---|---|---|
| Definition List | <dl>, <dt>, <dd> | Term-definition pairs | Glossaries, FAQs, dictionaries |
| Unordered List | <ul>, <li> | Bullet points | Feature lists, navigation menus |
| Ordered List | <ol>, <li> | Numbered sequence | Steps, rankings, procedures |
Conclusion
The <dl> tag with <dt> and <dd> elements is the semantic way to create glossaries and term-definition pairs in HTML. Definition lists provide better structure and accessibility compared to using regular paragraphs or other list types for dictionary-style content, making them ideal for FAQs, glossaries, and technical documentation.
2K+ Views
