What is the description list?

<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).

Table of Contents Show

<dl>: The Description List element
HTML <dl> Tag
HTML Description List | HTML Definition List
Using description lists
Important Information about Techniques
DL - Definition Lists
List Header
Permitted Attributes for the DL Element
Explain Description Lists in HTML
Introduction toHTML Description List
HTML Description List Tags
Conclusion –HTML Description List
Recommended Articles

Content categories	Flow 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 omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	group, list, none, presentation
DOM interface	HTMLDListElement

HTML <dl> Tag

❮ Previous Complete HTML Reference Next ❯

Example

A description list, with terms and descriptions:

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Try it Yourself »

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:

<dl> tag defines the description list.
<dt> tag defines data term.
<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

Using description lists

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

DL - Definition Lists

Permitted Context: %Body.Content, %flow, %block
Content Model: Optional list header(LH), followed by one or more terms(DT) and definitions(DD).

A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term on the left with the definition following on the right or on the next line. The definition text is typically indented with respect to the term.

An alternative format places the term left aligned in a wide margin and the definition on one or more lines to the right of the term. If the DT term does not fit in the DT column (one third of the display area), it may be extended across the page with the DD section moved to the next line, or it may be wrapped onto successive lines of the left hand column.

The opening list tag must be <DL>. It is followed by an optional list header (<LH>caption</LH>) and then by term names (<DT>) and definitions (<DD>). For example:

<DL> <LH>List Header</LH> <DT>Term 1<dd>This is the definition of the first term. <DT>Term 2<dd>This is the definition of the second term. </DL>

which could be rendered as:

List Header

Term 1This is the definition of the first term.Term 2This is the definition of the second term.

The definition list element can take the COMPACT attribute, which suggests that a compact rendering be used, and is appropriate if the list elements are small and/or the entire list is large.

Note: Use the NOTE element when you want to have an indented note. The practice of using <DD> elements without corresponding <DT> elements is deprecated.

Permitted Attributes for the DL Element

IDAn SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Identifiers are NAME tokens and must be unique within the scope of the current document.LANGThis is one of the ISO standard language abbreviations, e.g. "en.uk" for the variation of English spoken in the United Kingdom. It can be used by parsers to select language specific choices for quotation marks, ligatures and hypenation rules etc. The language attribute is composed from the two letter language code from ISO 639, optionally followed by a period and a two letter country code from ISO 3166.CLASSThis a space separated list of SGML NAME tokens and is used to subclass tag names. By convention, the class names are interpreted hierarchically, with the most general class on the left and the most specific on the right, where classes are separated by a period. The CLASS attribute is most commonly used to attach a different style to some element, but it is recommended that where practical class names should be picked on the basis of the element's semantics, as this will permit other uses, such as restricting search through documents by matching on element class names. The conventions for choosing class names are outside the scope of this specification.CLEARThis attribute is common to all block-like elements. When text flows around a figure or table in the margin, you sometimes want to start an element like a header, paragraph or list below the figure rather than alongside it. The CLEAR attribute allows you to move down unconditionally:

clear=leftmove down until left margin is clearclear=rightmove down until right margin is clearclear=allmove down until both margins are clear

Alternatively, you can decide to place the element alongside the figure just so long as there is enough room. The minimum width needed is specified as:

clear="40 en"move down until there is at least 40 en units freeclear="100 pixels"move down until there is at least 100 pixels free

The style sheet (or browser defaults) may provide default minimum widths for each class of block-like elements.

COMPACTThe presence of this attribute indicates the user agent should use reduced interitem spacing. The COMPACT attribute may also reduce the width of the left-hand (DT) column.

In practice, there are several ways to increase the compactness of lists: reduced vertical interitem spacing, smaller font size, or even to avoid line breaks between items. This is best handled through associated style sheets and the class attribute.

The opening list tag must be DL COMPACT. It must be immediately followed by the first term (DT). For example:

<DL compact> <DT>Term<DD>This is the first definition in compact format. <DT>Term<DD>This is the second definition in compact format. </DL>

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:

HTML

<!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:

Example 2:

HTML

<!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:

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>.

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.
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.
Definition description<dd> -This element defines the data under this element are taken has block-level or either inline.

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:

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:

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

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:

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:

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:

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:

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:

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:

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:

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.