HTML dl Tag
Last Updated :
26 Aug, 2024
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.
Please Login to comment...