Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to define a term or name in a definition list using HTML5?
In this article, we will discuss how to define a term or name in a definition list using HTML5. We will explore the various tags and attributes that are used to create a definition list, as well as the best practices for creating effective and accessible definitions. By the end of this article, you will have a solid understanding of how to create a definition list using HTML5 and how to effectively define terms and names within it.
Approaches
We have two different approaches to defining a term or name in a definition list using HTML5 including the following −
Using the “ <dl>, <dt>,<dfn> and <dd> elements”
Using the “ nested <ul> and <li> elements”
Let us look at each step in detail.
Approach 1: Using the " <dl>, <dt>,<dfn> and <dd> method"
The first approach is to define a term or name in a definition list using HTML5 as “<dl>, <dt>,<dfn> and <dd> elements”.This is the most common approach to creating a definition list. The <dl> element is used to define the list, the <dt> element is used to define the term being defined, and the <dfn> element is used to indicate the term or phrase being defined in a definition list using the <dt> element. and the <dd> element is used to define the definition of the term.
Example
Following is an example of defining a term or name in a definition list using HTML5 using “<dl>, <dt>,<dfn> and <dd> elements ”.
<!DOCTYPE html>
<html>
<head>
<title>Definition List with <dfn> Element</title>
<style>
body {
font-family: Arial, sans-serif;
border: 2px solid ;
border-radius: 7px;
}
dt {
font-weight: bold;
background-color: #f2f2f2;
color: blue;
}
dd {
padding: 20px;
color: green;
}
dfn {
font-weight: bold;
}
</style>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd><dfn>HTML</dfn> stands for Hyper-Text Markup Language, which is used to structure content on the web.</dd>
<dt>CSS</dt>
<dd><dfn>CSS</dfn> stands for Cascading Style Sheets, which is used to style and layout web pages.</dd>
<dt>JavaScript</dt>
<dd><dfn>JavaScript</dfn> is a programming language that allows for dynamic and interactive behavior on web pages.</dd>
</dl>
</body>
</html>
Approach: Using the "nested <ul> and <li> method"
The first approach is to define a term or name in a definition list using HTML5 as “nested <ul> and <li> ”. It is another approach to creating a definition list. The outer <ul> element represents the entire list, with each term represented by an <li> element. Inside each <li> element is another <ul> element that contains one or more <li> elements representing the definition(s) of the term.
Example
Following is an example of defining a term or name in a definition list using HTML5 using “nested <ul> and <li> ”.
<!DOCTYPE html>
<html>
<head>
<style>
dt {
font-weight: bold;
color: blue;
}
dd {
margin: 10px 0;
color: green;
}
dd li::before {
content: "- ";
font-weight: bold;
color: orange;
}
</style>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Hyper-Text Markup Language, which is used to structure content on the web.
<ul>
<li>HTML5 is the latest version of HTML.</li>
</ul>
</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, which is used to style and layout web pages.
<ul>
<li>CSS3 is the latest version of CSS.</li>
</ul>
</dd>
</dl>
</body>
</html>
Conclusion
In this article, we examined two different approaches to defining a term or name in a definition list using HTML5. Here, we are using two different approaches “<dl>, <dt>,<dfn> and <dd> elements ” and the “nested <ul> and <li> elements”. It is important to choose the appropriate approach based on the content and context of the webpage.
174 Views
