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 a definition term in HTML?
The definition term is represented by the <dt> tag in HTML, which describes the name or term in a description list. The <dt> element works in conjunction with <dd> and <dl> tags to create structured definition lists.
<dl>tag defines a description list container<dt>tag defines the term being described<dd>tag provides the description or definition for each term
The <dt> tag supports both global and event attributes and is supported by all modern browsers.
Syntax
Following is the syntax for creating definition terms −
<dl> <dt>Term</dt> <dd>Definition or description</dd> </dl>
Basic Definition List Example
Following example demonstrates creating a definition list with multiple terms and descriptions −
<!DOCTYPE html>
<html>
<head>
<title>Definition Terms Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Daily Meals</h2>
<dl>
<dt>Breakfast</dt>
<dd>Idly</dd>
<dd>Coffee</dd>
<dt>Lunch</dt>
<dd>Rice</dd>
<dd>Dal Curry</dd>
<dt>Dinner</dt>
<dd>Chapati</dd>
<dd>Curry</dd>
</dl>
</body>
</html>
The output displays terms in bold with their descriptions indented below −
Daily Meals
Breakfast
Idly
Coffee
Lunch
Rice
Dal Curry
Dinner
Chapati
Curry
Technical Definition List Example
Following example shows how to create a technical glossary using definition terms −
<!DOCTYPE html>
<html>
<head>
<title>Programming Terms</title>
<style>
dl { margin: 20px 0; }
dt { font-weight: bold; color: #2c3e50; margin-top: 15px; }
dd { margin-left: 20px; margin-bottom: 10px; color: #555; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Concepts</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language used for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets for styling web documents.</dd>
<dt>JavaScript</dt>
<dd>Programming language for interactive web functionality.</dd>
</dl>
</body>
</html>
Definition Element (<dfn>)
The <dfn> element is used to mark the defining instance of a term. It represents the first occurrence or formal definition of a term within a document. Text inside <dfn> typically appears in italic font to indicate it is a special term being defined.
Syntax
Following is the syntax for the definition element −
<dfn title="explanation">Term</dfn>
Example
Following example demonstrates using the definition element within text −
<!DOCTYPE html>
<html>
<head>
<title>Definition Element Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Web Development Terms</h2>
<p>
<dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language
for creating web pages. When you hover over the term, you'll see its full meaning.
</p>
<p>
A <dfn title="A list containing terms and their descriptions">description list</dfn>
is useful for glossaries and definitions.
</p>
</body>
</html>
The defined terms appear in italics and show a tooltip when hovered −
Web Development Terms HTML is the standard markup language for creating web pages. When you hover over the term, you'll see its full meaning. A description list is useful for glossaries and definitions.
Abbreviation Element (<abbr>)
The <abbr> element represents an abbreviation or acronym. It typically displays with a dotted underline and shows the full expansion when hovered over using the title attribute.
Syntax
Following is the syntax for abbreviation elements −
<abbr title="full expansion">Abbreviation</abbr>
Example
Following example shows how to use abbreviations with definition terms −
<!DOCTYPE html>
<html>
<head>
<title>Abbreviations and Definitions</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Technology Abbreviations</h2>
<p>
Welcome to <dfn>TutorialsPoint</dfn>, a comprehensive learning platform.
We offer <abbr title="HyperText Markup Language">HTML</abbr>,
<abbr title="Cascading Style Sheets">CSS</abbr>, and
<abbr title="Application Programming Interface">API</abbr> tutorials.
</p>
<dl>
<dt><abbr title="World Wide Web">WWW</abbr></dt>
<dd>The global information system of interconnected web pages.</dd>
<dt><abbr title="HyperText Transfer Protocol">HTTP</abbr></dt>
<dd>Protocol used for transferring web pages over the internet.</dd>
</dl>
</body>
</html>
Abbreviations show a dotted underline and display their full form on hover.
Combining All Definition Elements
Following example demonstrates using all three definition elements together −
<!DOCTYPE html>
<html>
<head>
<title>Complete Definition Example</title>
<style>
dt { font-weight: bold; margin-top: 10px; }
dd { margin-left: 20px; }
dfn { font-style: italic; color: #e74c3c; }
abbr { text-decoration: underline dotted; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Web Technology Glossary</h2>
<p>
<dfn title="HyperText Markup Language">HTML</dfn> is the foundation of web development,
working alongside <abbr title="Cascading Style Sheets">CSS</abbr> for styling.
</p>
<dl>
<dt><abbr title="HyperText Markup Language">HTML</abbr></dt>
<dd>Standard markup language for creating web pages and applications.</dd>
<dt><abbr title="Cascading Style Sheets">CSS</abbr></dt>
<dd>Style sheet language used for describing document presentation.</dd>
<dt><abbr title="Document Object Model">DOM</abbr></dt>
<dd> 
593 Views
