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 define the start of a term in a definition list in HTML?
The HTML <dt> tag is used to define the start of a term in a definition list. A definition list is similar to other lists but in a definition list, each list item contains two entries: a term and a description. The <dt> tag defines the term, while the <dd> tag provides its corresponding definition or description.
Syntax
Following is the syntax for the <dt> tag −
<dl> <dt>Term</dt> <dd>Description of the term</dd> </dl>
The <dt> element must be used within a <dl> (definition list) container and is typically followed by one or more <dd> (definition description) elements.
Example
Following example demonstrates how to define the start of a term in a definition list using the <dt> tag −
<!DOCTYPE html>
<html>
<head>
<title>HTML dt Tag</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Programming Languages</h2>
<dl>
<dt>Definition List</dt>
<dd>A list of terms and their definitions/descriptions.</dd>
<dt>JAVA</dt>
<dd>Tutorial on JAVA Programming Language.</dd>
<dt>Android</dt>
<dd>Tutorial on Android Operating System.</dd>
</dl>
</body>
</html>
The output of the above code displays terms in bold followed by their indented descriptions −
Programming Languages
Definition List
A list of terms and their definitions/descriptions.
JAVA
Tutorial on JAVA Programming Language.
Android
Tutorial on Android Operating System.
Multiple Descriptions for One Term
A single term can have multiple descriptions by using multiple <dd> tags after one <dt> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Descriptions</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Web Technologies</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dd>Used for creating web page structure</dd>
<dd>Standard markup language for web documents</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dd>Used for styling HTML elements</dd>
</dl>
</body>
</html>
The output shows one term with multiple descriptions −
Web Technologies
HTML
HyperText Markup Language
Used for creating web page structure
Standard markup language for web documents
CSS
Cascading Style Sheets
Used for styling HTML elements
Styling Definition Lists
Definition lists can be styled using CSS to customize their appearance. The <dt> elements are typically displayed in bold, while <dd> elements are indented.
Example
<!DOCTYPE html>
<html>
<head>
<title>Styled Definition List</title>
<style>
dt {
font-weight: bold;
color: #2c5aa0;
margin-top: 10px;
}
dd {
margin-left: 20px;
margin-bottom: 10px;
color: #555;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Database Terms</h2>
<dl>
<dt>SQL</dt>
<dd>Structured Query Language for managing databases</dd>
<dt>NoSQL</dt>
<dd>Non-relational database management systems</dd>
<dt>ACID</dt>
<dd>Atomicity, Consistency, Isolation, Durability</dd>
</dl>
</body>
</html>
The styled definition list displays terms in blue bold text with proper spacing between elements.
Common Use Cases
Definition lists are commonly used for −
-
Glossaries − Technical terms and their explanations
-
FAQ sections − Questions as terms, answers as descriptions
-
Metadata − Name-value pairs like author, date, category
-
Product specifications − Features and their details
Conclusion
The <dt> tag defines terms in HTML definition lists and must be used within a <dl> container. It works together with <dd> tags to create structured term-description pairs. Definition lists are perfect for glossaries, FAQs, and any content requiring term-definition relationships.
318 Views
