search

What is description list write the tags used to create a description list?

2 years ago
Komentar: 25698
Dibaca: 108

<dl>: The Description List element

The <dl> HTML element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

Show
Content categoriesFlow content, and if the <dl> element's children include one name-value group, palpable content.
Permitted content

Either: Zero or more groups each consisting of one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements.
Or: (in WHATWG HTML, W3C HTML 5.2 and later) One or more <div> elements, optionally intermixed with <script> and <template> elements.

Tag omissionNone, both the starting and ending tag are mandatory.
Permitted parentsAny element that accepts flow content.
Implicit ARIA roleNo corresponding role
Permitted ARIA rolesgroup, list, none, presentation
DOM interfaceHTMLDListElement

HTML Description List | HTML Definition List

HTML Description List or Definition List displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

The 3 HTML description list tags are given below:

  1. <dl> tag defines the description list.
  2. <dt> tag defines data term.
  3. <dd> tag defines data definition (description).
Test it Now

Output:

HTMLis a markup languageJavais a programming language and platformJavaScriptis a scripting languageSQLis a query language

Explain Description Lists in HTML

A description list is a list of terms, with a description of each term. Lists in HTML are used for specifying particular information in list form. There are various types of Lists in Html such as Ordered Lists, Unordered Lists, and description Lists.

Description Lists are used for:

  • To give definitions to particular terms that we have defined in our lists.
  • To have a dictionary type of format(term and definition of term)

Format of description Lists:

  • Description Lists are used with description list tag <dl> tag in html.
  • In <dl> tag we have description terms it is represented as <dt> tag Here we do not use li tag as Other Lists. In <dt> write terms of the data. We can have different terms with the help of <dl>tag.
  • In this we use data description tag <dd> we use this tag for defining the term that we have stated. for eg. If we declare term as Pizza then we can have description as Pizza is a food item.

Syntax:

<dl> Contents of the list </dl>

Example 1:






<!DOCTYPE html>
<html>
<head>
<title>
Description lists in html
</title>
</head>
<body>
<h2>GeeksForGeeks Courses</h2>
<h2>
Live courses at GeeksForGeeks
and their Description
</h2>
<dl>
<dt>
Full Stack Development with
React & Node JS - Live:
</dt>
<dd>
Learn how to develop Single
Page Web Applications.
</dd>
<dt>System Design - Live:</dt>
<dd>
For individuals looking to
crack SDE job interviews.
</dd>
<dt>JAVA Backend Development - Live:</dt>
<dd>Learn backend development with Java</dd>
<dt>DSA Live for Working Professionals:</dt>
<dd>
A LIVE classroom program designed
for Working Professionals
</dd>
</dl>
</body>
</html>

Output:

What is description list write the tags used to create a description list?

Example 2:




<!DOCTYPE html>
<html>
<head>
<title>Description lists in html</title>
</head>
<body>
<h2>GeeksForGeeks problem difficulties</h2>
<h2>
This is Type and description of problem
difficulty levels <br>at Practice
platform of GeeksForGeeks.
</h2>
<dl>
<dt>School:</dt>
<dd>Basic/school level problems</dd>
<dt>Basic:</dt>
<dd>Simple logical problems</dd>
<dt>Easy:</dt>
<dd>
Problems based on simple
data structures and logic
</dd>
<dt>Medium:</dt>
<dd>Medium level problems based on dsa</dd>
<dt>Hard:</dt>
<dd>High level logical thinking problems</dd>
</dl>
</body>
</html>

Output:

What is description list write the tags used to create a description list?

What is description list write the tags used to create a description list?




Article Tags :
HTML
Web Technologies
HTML-Questions
HTML-Tags
Practice Tags :
HTML
Read Full Article

Introduction toHTML Description List

This article describes the Description list or Definition list and how it is useful in an HTML document. So how to define a description list? In simple terms, we can say it is a list of definitions (for example, glossaries to present the information on the internet/ web page). However, the usage of the Description list is less but have some purpose. Meanwhile, this definition lists gives added value to the web page; for example, the text given on the web page explains the context in other words in helping through semantically marking up the context. By doing this, we can easily extract the structured information. A definition list is a perfect term to describe the terms, values and another glossary.

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

<dl>
<dt>
……
</dt>
<dd>
………..
</dd>
</dl

There are three elements in description list, these are <dl>, <dt>, <dd>.

  1. Definition list<dl> – It is used to describe the many no. of terms in the listed information and forms an outer tag. It conveys like in the normal documents or often used as a glossary.
  2. Definition Term<dt> – This element has been used under the definition list currently and has the inline data or the value of the dl element.
  3. Definition description<dd> -This element defines the data under this element are taken has block-level or either inline.

HTML Description List Tags

A description list is one of the types of lists; they are considered a generic form of an ordered bullet list. The only difference is that no bullet icon.

Note: Any definition list comprises of sequence of <dt><dd> combinations/ one-to-many relationships’ combinations. These description tags are supported in HTML4 and enhanced with new terms in HTML5 as more name-value pairs. It makes an association link between question and answers.

Type 1: Single definition term and definition together

Example #1

<!DOCTYPE html>
<html>
<body>
<dl>
<dt><b>Web Designing company in Chennai<b></dt>
<dd>This service Enhance Website Exposure with professional User Interface </dd>
</dl>
</body>
</html>

Output:

What is description list write the tags used to create a description list?

Example #2

<html>
<head>
<title>Page Title</title>
<style>
body {
background-color: pink;
text-align: center;
color: blue;
font-family: Arial, italic;
}
</style>
</head>
<body>
<h2>HTML Demo 2</h2>
<p>This is Networking Protocol Abbreviation.</p>
<dl>
<dt>FTP
<dd>File Transfer Protocol
<dt>TCP/IP
<dd>Transmission Control Protocol/IP address
<dt>SNMP
<dd>Simple Network Management Protocol
</dl>
</body>
</html>

Output:

What is description list write the tags used to create a description list?

Type 2: Single description along with multiple terms

Example# 1

<!DOCTYPE html>
<html>
<body>
<dl>
<dt> Ebay</dt>
<dt>Etsy</dt>
<dt>Walmart</dt>
<dd>The Top 10 internet shopping websites in the year 2019</dd>
</dl>
</body>
</html>

Popular Course in this category
What is description list write the tags used to create a description list?
HTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (8,327 ratings)
Course Price

View Course
Related Courses
Bootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)

Output:

What is description list write the tags used to create a description list?

Next, we shall use the ‘lang’ attribute in the <dl> where the terms use different languages. These attributes put out ISO language code as its two-letter value.

Example# 2

<!DOCTYPE html>
<html>
<body>
<h2>A Description HTML list</h2>
<dl lang="es">
<dt>formas</dt>
<dt lang="en-us">Shapes</dt>
<dt lang="fr">Formes</dt>
<dd>A Shape determines the different structure of the objects. </dd>
</dl>
</body>
</html>

Output:

What is description list write the tags used to create a description list?

Type 3: Single term describing multiple descriptions

Example

<html>
<head>
<title>DEFINITION LIST</title>
</head>
<body bgcolor=" brown" text="pink">
<h2><u>DEFINITION LIST DEMO</u></h2>
<h3>
<dl>
<dt lang="es"><u>Compact:</u></dt>
<dd>A Compact may refer to make-up case.
</dd>
<dd>When taken as adjective it refers to smaller part. Example, need a compact sofa to sit.</dd>
</dl>
<h3>
</body>
</html>

Output:

What is description list write the tags used to create a description list?

Type 4: Multiple Terms and Multiple Descriptions

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.1">
<title>Definition List example</title>
</head>
<body>
<h2>Definition List Demo4</h2>
<dl>
<dt> Engaged</dt>
<dt>Leaves</dt>
<dd>Students got engaged during their Lab hours in the college.</dd>
<dd>Childrens feels when their father leaves for the work.</dd>
</dl>
</body>
</html>

Output:

What is description list write the tags used to create a description list?

Type 5: Definition List using Style Attribute

Here style attribute is indicated for the colors to highlight the description terms.

Example #1

<html>
<head> HTML Definition Lists </head>
<body>
<h2> list of Popular International Entrance Examination <h2>
<dl>
<dt style="color:Blue"> TOEFL </dt>
<dd> -: Test of English As Foreign Language . This Score is Accepted in the country like Canada,UK,USA</dd>
<br>
<dt style="color:Magenta"> GRE </dt>
<dd> -: The Graduate Record Examination. This Test is allowed to enter in the States like Canada and US foran indian Students in the Science and Technology Fields </dd>
</dl>
</body>
</html>

Output:

What is description list write the tags used to create a description list?

Using the <dfn> tag, it is understood that the nearby text is assigned to be the definition of the term.

Example #2

<!DOCTYPE html>
<html>
<head>
<title> Demo</title>
<dl>
<dt lang="en-GB"><dfn> Definition list</dfn></dt>
<dt><dfn><b>Apple fruit </b></dfn></dt>
<dd>This fruit is quoted as "miracle food" where this gives best nutrients to the body. They are rich in antioxidents</dd>
<dd>A small fragment of apple intakes daily cures cancer,heart disease etc.</dd>
<dd> Different varieties includes Braeburn,Cameo,Fuji,Gala </dd>
</dl>
</html>

Output:

What is description list write the tags used to create a description list?

Type 6: Placing Background color for the Description List

Below Examples Shows the Content with background color By using the attribute ‘bgcolor’.

Example

<html>
<head>
<title>DEFINITION LIST</title>
</head>
<body bgcolor="Green" text="pink">
<h2><u>DEFINITION LIST DEMO</u></h2>
<h3>
<dl>
<dt lang="en-GB"><u>PYTHON:</u></dt>
<dd>Python is a progranning Language originally developed by Guido van. Its an Open Source and Cross-Platform. Applications include Web development, Data Machine Learning
</dd>
</dl>
<h3>
</body>
</html>
</dl>
</html>

Output:

What is description list write the tags used to create a description list?

Conclusion –HTML Description List

We hope this article on Definition lists or can be said as Glossary Lists has guided to demonstrate some of the available uses definition lists can be put to. We have seen a basic understanding of how these can be used to develop useful co-operation between snippets of information. For instance, google glossary gives how meaningful information can be marked up and can be used on web page in many ways. They have future functionality whereby some websites use semantic to present beauty to their data and reuse the given information so simple and flexible.

This has been a guide to HTML Description List. Here we also discuss the introduction to HTML Description List, their syntax, and different HTML Description List Tags types. You may also have a look at the following articles to learn more–

  1. HTML Colors
  2. HTML Event Attributes
  3. HTML Layout
  4. HTML onclick Button

HTML Training (12 Courses, 19+ Projects, 4 Quizzes)

12 Online Courses

19 Hands-on Projects

89+ Hours

Verifiable Certificate of Completion

Lifetime Access

4 Quizzes with Solutions

Learn More

1 Shares
Share
Tweet
Share

HTML Lists

In this tutorial you will learn how to create different types of lists in HTML.

10 Lists

Contents

  1. Introduction to lists
  2. Unordered lists (UL), ordered lists (OL), and list items (LI)
  3. Definition lists: the DL, DT, and DD elements
    1. Visual rendering of lists
  4. The DIR and MENU elements

Top List List

Pos Terkait

How do you delete a node in a linked list Python?
How do you delete a node in a linked list Python?

Which values can be specified to list-style-type property for ordered list write any 4 values )?
Which values can be specified to list-style-type property for ordered list write any 4 values )?

Komponen komponen kontrol motor listrik
Komponen komponen kontrol motor listrik

Which of the following tag is suitable for creating a numbered list
Which of the following tag is suitable for creating a numbered list

Which tags do you use to write the header and items of an ordered list on a Web page you use the tag to write the header and you use the tag for the items of an ordered list?
Which tags do you use to write the header and items of an ordered list on a Web page you use the tag to write the header and you use the tag for the items of an ordered list?

Which attribute is used to change the start of numbering in an ordered list?
Which attribute is used to change the start of numbering in an ordered list?

Create a html code for the below nested List 1 groceries a vegetables b fruits c pulses
Create a html code for the below nested List 1 groceries a vegetables b fruits c pulses

What type of list would be best when the items in the list must be in a specific order?
What type of list would be best when the items in the list must be in a specific order?

How are you going to insert list items in unordered an ordered list tags?
How are you going to insert list items in unordered an ordered list tags?

Which tag is used to display the list of items contained in any of the two list types?
Which tag is used to display the list of items contained in any of the two list types?

Periklanan

BERITA TERKINI

Bisakah Anda mengaktifkan javascript di ponsel?
1 years ago . by AdorableMantra
Bagaimana Anda menghapus teks duplikat dengan python?
1 years ago . by DecreasingEmperor
Cara menghapus latar belakang video di CapCut
1 years ago . by SkepticalDugout
Apa itu rounddown dalam excel?
1 years ago . by JollyDollar
Dapatkan array multidimensi kunci php
1 years ago . by LuridRecognition
Cara mengeluarkan darah haid yang tidak keluar
1 years ago . by CuriousRedundancy
Dapatkan javascript bulan dengan 0
1 years ago . by NastyMedics
Python cetak daftar daftar secara vertikal
1 years ago . by DeviantColors
Cara membersihkan kacamata yang tergores
1 years ago . by Two-storyDealing
Cara menggunakan variable to dataframe python
1 years ago . by ThrobbingMetaphysics

Toplist Popular

#1
Top 10 berikut ini yang bukan merupakan penetapan tujuan visi perusahaan adalah 2022
1 years ago
#2
Top 10 sebuah bak air berbentuk balok dengan ukuran panjang 40 cm, lebar 30 cm, dan tinggi 35 cm 2022
1 years ago
#3
Top 9 banjir bukan sekadar bencana alam paragraf 3 gagasan utama 2022
1 years ago
#4
Top 10 diketahui himpunan himpunan sebagai berikut p bilangan ganjil yang kurang dari 15 2022
1 years ago
#5
Top 10 penyelesaian dari persamaan 3x 2 y 9 dan 2x y 3 adalah 2022
1 years ago
#6
Top 10 bagaimana cara memberi salam kepada orang tua dan guru yang benar brainly 2022
1 years ago
#7
Top 10 semakin tinggi nilai toleransi semakin tinggi nilai integrasi nasional 2022
1 years ago
#8
Top 10 benda kerajinan tidak boleh membahayakan pemakainya maka benda kerajinan memiliki prinsip 2022
1 years ago
#9
Top 9 bagian tutup sumbat termos biasanya terbuat dari benda berjenis brainly 2022
1 years ago
#10
Top 9 pernyataan yang sesuai dengan prinsipteori evolusi jb lamarck ditunjukkan oleh angka 2022
1 years ago

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeenfritzhtrjako
Copyright © 2024 idkuu.com Inc.