HTML dl Tag

Last Updated : 26 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

The <dl> tag in HTML is used to represent the description list. This tag is used with <dt> and <dd> tag. In HTML4.1, it defines definition list and in HTML5, it defines description list.
 

Syntax: 

<dl> Contents... </dl>

Example: In this example, we demonstrate the use of the <dl> (description list) tag. It defines the term <dt> and its description <dd>, showcasing “GeeksforGeeks” as a computer science portal.

HTML 
<!DOCTYPE html>

<html>

<body>

    <h1>GeeksforGeeks</h1>
    <h2>dl Tag</h2>
    <!-- HTML dl tag -->
    <dl>
        <dt>GeeksforGeeks</dt>
        <dd>A Computer Science Portal For Geeks</dd>
    </dl>

</body>

</html>

Output: 

Supported Browsers: 

  • Google Chrome
  • Edge 12
  • Internet Explorer
  • Firefox 1
  • Safari
  • Opera

HTML dl Tag – FAQs

Is the <dl> tag block-level or inline-level?

The <dl> tag is a block-level element, meaning it naturally takes up the full width available and starts on a new line.

Can I use the <dl> tag for a pricing table?

Yes, a <dl> tag can be used creatively for a simple pricing table, where the product names are <dt> elements and the prices are <dd> elements. However, a more complex pricing structure might be better handled with tables (<table>).

How do I control spacing between <dt> and <dd> elements?

You can control the spacing between <dt> and <dd> elements using CSS properties like margin and padding. Example: dd { margin-top: 5px; } can adjust the gap between the term and its description.

What happens if I have multiple <dd> tags after a single <dt> tag?

HTML allows you to have multiple <dd> tags for a single <dt> tag. This is useful if you want to provide multiple definitions or descriptions for a single term.
 

How do I handle long descriptions in a <dl> tag?

For long descriptions, you can style the <dd> tag using CSS for better readability, such as setting line-height, text-align, and controlling width to avoid overly wide text blocks.


N
nk464529
News
Improve
Previous Article
HTML Div Tag
Next Article
HTML dt Tag

Similar Reads

Which tag is used to represent progress of a task in HTML & how is it different from &lt;meter&gt; tag ?
In this article, we will see which tag is used to represent the progress of a task in HTML. To represent the progress of a task, we will use the &lt;progress&gt; tag. This tag is used to represent the progress of a task. It is also defined how much work is done and how much is left. Syntax: &lt;progress attributes...&gt; &lt;/progress&gt; Attribute
2 min read
Is container tag same as the empty tag in HTML? If not, why ?
In this article, we will see the container tag &amp; empty tag in HTML, along with knowing how they're different from each other. The Container tag is not the same as the empty tag &amp; these are two different categories of tags used in HTML. Container tag: This tag contains 3 parts, namely, the opening tag, content that will be displayed in the b
5 min read
Why &lt;big&gt; tag is not in HTML5 while &lt;small&gt; tag exists ?
The &lt;big&gt; tag was discontinued in HTML5 while &lt;small&gt; tag is still in handy because &lt;small&gt; tag is frequently used to represent small prints like footnotes, copyright notices, comments etc. Many alternatives for &lt;big&gt; tag are already available such as &lt;h1&gt;, &lt;h2&gt; and so on. In HTML5 instead of using &lt;big&gt;, y
2 min read
Explain the difference between head Tag and header Tag in HTML5 ?
The &lt;head&gt; element is a container for metadata and is placed between the &lt;html&gt; and &lt;body&gt; tags. The &lt;header&gt; is for the main content section's introductory elements, like headings or logos and it mainly focuses on what appears at the top of the webpage. &lt;head&gt; ElementThe &lt;head&gt; element is part of the HTML docume
1 min read
What is the difference between the &lt;br&gt; Tag and the &lt;p&gt; Tag ?
The &lt;br&gt; tag is used to insert a line break, creating a new line within text or content. It doesn't have a closing tag and is a self-closing tag. On the other hand, the &lt;p&gt; tag defines a paragraph, separating blocks of text. It has an opening &lt;p&gt; and a closing &lt;/p&gt; tag, allowing for the structured organization of text into p
2 min read
Difference between &lt;article&gt; tag and &lt;section&gt; tag
Both the tags are semantics in HTML 5. In this article, we will discuss about the &lt;article&gt; and &lt;section&gt; tag. Both the &lt;article&gt; and &lt;section&gt; tags are represented similarly but used for some meaning, that meaning is for the browsers and the developers. Both tags can replace each other as there will be no changes to the out
4 min read
What purpose does a &lt;script&gt; tag serve inside of a &lt;noscript&gt; tag?
Usage of NoScript tag: The tag defines alternate content that will be displayed if the user has disabled script or browser does not support script. It can be used inside both &lt;head&gt; and &lt;body&gt; tag. Syntax: &lt;noscript&gt; Contents... &lt;/noscript&gt; Example: [GFGTABS] HTML &lt;html&gt; &lt;head&gt; &lt;title&gt;wbr Tag&lt;/title&gt;
1 min read
HTML &lt;html&gt; Tag
HTML is a language full of diverse elements, and one such element is the &lt;html&gt; tag. This tag, standing for ‘HyperText Markup Language’, is used to define the root of an HTML or XHTML document. It serves as the main container for all other HTML elements, excluding the &lt;!DOCTYPE&gt; declaration. Understanding the &lt;html&gt; TagThe &lt;htm
3 min read
HTML | &lt;noframes&gt; Tag
The &lt;noframes&gt; tag is the backup for those browsers that does not support frames. This tag can contains all the element that can be placed in &lt;body&gt; tag. It is used to create link with the non-frame set version of any website where you want to display a message to the user. This &lt;noframes&gt; tag is not supported in HTML5. Syntax:
1 min read
HTML &lt;hgroup&gt; Tag
The &lt;hgroup&gt; tag in HTML stands for heading group and is used to group the heading elements. The &lt;hgroup&gt; tag in HTML is used to wrap one or more heading elements from &lt;h1&gt; to &lt;h6&gt;, such as the headings and sub-headings. The &lt;hgroup&gt; tag requires the starting tag as well as ending tag. Note: &lt;hgroup&gt; is deprecate
1 min read
HTML | &lt;map&gt; Tag
The &lt;map&gt; tag is to define the map-image on the user interface which is clickable. The &lt;map&gt; required the &lt;img&gt; tag that helps the relation between the image and map. The &lt;map&gt; element contains a number of &lt;area&gt; elements that define the clickable areas in the image map. Syntax: &lt;map name=""&gt; &lt;/map&gt; Example
1 min read
HTML | &lt;bgsound&gt; tag
The HTML &lt;bgsound&gt; tag is used to play the soundtrack in the background, when you leave the page behind and open a new tab this tag will continuously play the track in the background. This tag is not for other browsers except the Internet Explorer. It does not display any graphical interface just played the track in the background. Syntax:
1 min read
HTML | &lt;isindex&gt; tag
The &lt;isindex&gt; tag is used to querying any document through a text field. Means this tag inform the browser that the user wants to provide the search function through the document. If you want to search any specific word in a long article this tag is helpful then. But during these days all the browsers contain that feature by pressing CTRL + F
2 min read
How to use Meta Tag to redirect an HTML page?
URL redirection, also called URL forwarding is a way to send users to a different URL from the one they originally requested. The three most commonly used redirects are 301, 302, and Meta Refresh. Meta Refresh Redirect is a client-side redirect. Unlike 301 and 302 redirects that happen on the webserver, Meta Refresh Redirect takes place in a web br
1 min read
Differences between HTML &lt;center&gt; Tag and CSS "text-align: center;" Property
If you are designing a simple web page, then not much difference is noticeable, but it is very necessary to understand the basic differences between these two. Since we are only concerned with the text, these elements do not have separate meanings.HTML &lt;center&gt; tag: The &lt;center&gt; tag in HTML is used to set to align of text into the cente
3 min read
How to validate HTML tag using Regular Expression
Given string str, the task is to check whether it is a valid HTML tag or not by using Regular Expression.The valid HTML tag must satisfy the following conditions: It should start with an opening tag (&lt;).It should be followed by a double quotes string or single quotes string.It should not allow one double quotes string, one single quotes string o
6 min read
How to get all HTML content from DOMParser excluding the outer body tag ?
DOM (Document Object Model) allows us to dynamically access and manipulate the HTML data. All the text data from an HTML file can also be extracted using DOMParser. DOM parser returns an HTML/XML/SVG object. All the objects can be accessed using the [ ] operator in javascript. The HTML DOM Tree of objects: Steps to get all the text from an HTML doc
2 min read
HTML sup Tag
The &lt;sup&gt; tag in HTML describes the text as a superscript text. Here the text is above the baseline of the text and that text appears in a smaller font. Syntax: &lt;sup&gt; Content... &lt;/sup&gt; Example 1: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;HTML sup Tag&amp;lt;/title&amp;g
1 min read
How to draw a circle using SVG tag in HTML ?
In this article, you will learn about SVG basic shape like circle which is among the different shapes of SVG like &lt;rect&gt;, &lt;line&gt;, &lt;ellipse&gt;, &lt;polygon&gt;, etc. So you can easily draw circles using &lt;circle&gt; tag whose parent tag is SVG tag in HTML. Basically, the &lt;circle&gt; element draws a circle on the screen which is
2 min read
Explain the significance of &lt;head&gt; and &lt;body&gt; tag in HTML
The HTML &lt;head&gt; and &lt;body&gt; tags are the two most commonly used tags in HTML. It is very rare to find an industry-level website that does not use the &lt;head&gt; and &lt;body&gt; tag in its pages. In this article, we are going to learn the significance of these two tags in an HTML document. Significance of HTML &lt;head&gt; tag: The hea
3 min read
HTML &lt;slot&gt; Tag
The slot is the element part of the web component technology which is a placeholder inside a component that you simply can fill together with your own markup, which allows you to make separate DOM trees and represent them together. Syntax: &lt;slot&gt; &lt;h1&gt;Heading&lt;/h1&gt; &lt;/slot&gt; Attributes: name: It describes the name of the slot. A
2 min read
What is the use of &lt;legend&gt; tag in HTML ?
In this article, we will discuss &lt;legend&gt; tag in HTML. The legend tag is used to define the title for the child's contents. The legend elements are the parent element. This tag is used to define the caption for the &lt;fieldset&gt; element. Syntax: &lt;legend&gt; Some Text...... &lt;/legend&gt; Example 1: In this example, we are going to crea
1 min read
Which specific tag is used to represent the article in HTML ?
In this article, we will see how to represent the article in HTML. The &lt;article&gt; tag is one of the new sectioning element in HTML5. The HTML &lt;article&gt; tag is used to represent an article. More specifically, the content within the &lt;article&gt; tag is independent of the other content of the site (even though it can be related). In othe
2 min read
Which tag is used to define the abbreviation of an element in HTML ?
In this article, we will discuss the tag that is used to define an abbreviation. The &lt;abbr&gt; tag in HTML is used to define the abbreviation or the short form of an element. The &lt;abbr&gt; and &lt;acronym&gt; tags are used as shortened versions and used to represent a series of letters. The abbreviation is used to provide useful information t
1 min read
Which specific tag is used to blink the text in HTML ?
The HTML &lt;blink&gt; tag is used to create a blinking text that flashes slowly. It has been obsolete all told fashionable browsers whereas some browsers never supported it in the least. This tag was also never standardized by hypertext mark-up language. You may recreate an identical visual impact using CSS and JavaScript. Internet usage guideline
2 min read
Which tag can be used as a container for the HTML elements ?
There are lots of tags that can be used as a container in HTML. These tags are generally divided into three parts, i.e., the opening tag, the content (which will display in the browser), and the closing tag. The content part can contain some other tags. The opening and closing tags are used in pairs. If you forget to close the container tag, the br
2 min read
When to use &lt;noscript&gt; tag in HTML ?
The &lt;noscript&gt; Tag in HTML is used to check whether the Browsers should support JavaScript or not. It is used to show the alternative text for those browsers which do not support script tag The &lt;noscript&gt; tag is used to handle the browsers, which do admit &lt;script&gt; tag but do not sustain scripting. This tag is placed in both &lt;he
1 min read
Describe the purpose of using alt attribute in &lt;img&gt; tag in HTML
The &lt;img&gt; alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image. It is also very much helpful in the Google ranking of your page. In this article, we will discuss the alt attribute in the &lt;img&gt; tag. Syntax: &lt;img alt="text
1 min read
Which tag is used to define the header for HTML document ?
The &lt;header&gt; tag in HTML is used to define the header for a document. It contains information related to the title and heading of the related content. The &lt;header&gt; element is intended to usually contain the section’s heading (an h1-h6 element or an &lt;hgroup&gt; element), but this is not required. The &lt;header&gt; element can also be
2 min read
Which tag captures only the space around the text in HTML ?
In this article, we will discuss the tags that capture only the space around the text in HTML. in this article, we will see different methods for creating space around the text in HTML. Method 1: Using the special characters designated for different spaces. The character entity "&amp;nbsp" is used to denote a non-breaking space which is a fixed spa
3 min read
Article Tags :