HTML dl Tag
Purpose of the dl Tag in HTML
“dl” stands for description list in HTML. This tag is used to create lists of multiple elements and provide descriptions of these elements. This serves as a nice way of conveying to someone the exact purpose of each element of the list. The “dl” tag in HTML is always accompanied by the “dt” and “dd” tags that are used for specifying the element and then providing its respective description. Therefore, whenever you wish to create a description list in HTML, you always need to enclose it inside the “dl” tag. Then, you can use the “dt” and “dd” tags for mentioning the terms of this list along with their descriptions.
Usage of the dl Tag in HTML
For learning how to use the “dl” tag in HTML, follow the examples explained below:
Example 1: Creating a Description List for Different Courses Offered by a University
Consider a scenario in which you wish to advertise the different courses offered by a university or any particular educational institution. The best and the most concise way of doing this is by creating a description list that provides a short description corresponding to each offered course. A description list can be created with the help of the “dl” HTML tag along with the “dt” and “dd” tags to define the terms of this list and to provide their respective descriptions. You can refer to the following HTML script for understanding this example well:
We have first provided the document type declaration with the line “<!DOCTYPE html>” so that our browser can instantly know that it is going to run an HTML file. Then, we have used the “<html>” and the “<body>” tags for enclosing our actual script within them. Next, we have used the “<h1>” header to specify the HTML elements that we are going to use in this script. This is followed by the “<p>” tag that defines a paragraph and we have used it for specifying the functionality of our script (i.e., it is going to use the “dl”, “dt”, and “dd” HTML tags.)
The “dl” tag which we have used to create the description list is the crux. We have defined the terms of this description list by making use of the “dt” tags. We have created a description list for three different courses. Then, for providing the description against each course, we have made use of the “dd” tags. After mentioning all the terms and their associated descriptions in our description list, we have closed the “dl” tag followed by the closure of the “<body>” and “<html>” tags.
How to run this HTML File?
We have used the simple notepad application for creating this HTML script. Then, we clicked on the “File” menu as highlighted below:
After that, we have selected the “Save As” option.
Then, we have named our HTML file as “dl.html”. You can name it according to your choice. After that, we selected the type of the document and also the encoding. Then, we have simply saved this file. Now, our file is all set to be run in any browser of our choice.
We will simply right-click on our “dl.html” file and select the browser which we want to run this script (i.e., Google Chrome.) However, you can also run it on any other browser.
After the execution of this script, the following webpage will appear on your screen which will depict the functionality of your “dl.html” script:
Example 2: Creating a Description List for Some Abbreviations along with their Full Forms
For emphasizing more on the usage of the “dl” tag in HTML, this example will teach you how you can create a description list for some abbreviations and their full forms. For that, you can refer to the HTML script shown below:
In this HTML script, we have not used any headings rather we have simply made use of the paragraph tag for specifying the functionality of this script. This is followed by our description list which consists of four different terms and their associated descriptions.
After that, we have executed this HTML script in the same manner that we did in our first example. Its outcome is shown in the following image:
Conclusion
This guide was meant to introduce you to the description list or “dl” tag of HTML. By using this tag, you can create a list of terms or elements and provide their relevant descriptions very easily. For making this usage simpler, we demonstrated two different examples to you and also shared the corresponding HTML scripts. Once you will go through these scripts and see their working, you will instantly learn the usage of the HTML “dl” tag.
Source: linuxhint.com