- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <dl> Tag
The HTML <dl> tag represents a description list. This encloses a list of groups of words specified using the <dt> tag and the description provided by the <dd> element. The <dt> tag defines a data term, while the <dd> tag defines a data description.
The description lists are also useful for representing metadata as a list of key and value pairs.
The description list is similar to other lists, but in this list, each list item has two entries; a term and a description.
Syntax
Following is the syntax of the <dl> tag −
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> …. </dl>
Example
In the following example, we are creating a description list using the <dl> tag, which contains a term <dt> and a description <dd>.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Description lists</title> </head> <body> <!--create a descrition list--> <dl> <dt>HTML</dt> <dd>HTML stands for Hyper Text Markup Language.</dd> </dl> </body> </html>
When we run the above code, it will generate an output consisting of the text displayed on the webpage.
Example
The following is another example of a <dl> tag. Here, we are creating a description list using the <dl> tag, and it contains a single term <dt> and multiple descriptions <dd>.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Description lists</title> </head> <body> <!--create a descrition list--> <dl> <dt>CSS</dt> <dd>CSS stands for Cascading Style Sheet.</dd> <dd>It is used to define styles for the web pages.</dd> <dd>CSS types − Inline, Internal, External</dd> </dl> </body> </html>
On running the above code, the output window will pop up, consisting of text displayed on the webpage.
Example
In this example, we are creating an HTML description list using the <dl> tag. Then, we create multiple data terms using the <dt> tag within the list and a single data description using the <dd> tag.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Description lists</title> </head> <body> <!--create a descrition list--> <dl> <dt>VS CODE</dt> <dt>Visual Studio Code.</dt> <dd>Visual Studio Code is lightweight but powerful code editor.</dd> </dl> </body> </html>
When we run the above code, it will generate an output displaying the text on the webpage.
Example
The following HTML program will show the creation of a description list using the <dl> tag, which contains multiple data terms <dt> with the multiple corresponding data descriptions <dd>.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Description lists</title> </head> <body> <!--create a descrition list--> <dl> <dt>Name</dt> <dd>Aman kumar</dd> <dt>Age</dt> <dd>22</dd> <dt>City</dt> <dd>Ranchi</dd> <dt>State</dt> <dd>Jharkhand</dd> <dt>Country</dt> <dd>India</dd> </dl> </body> </html>
On running the above code, it will generate an output displaying the text on the webpage.
To Continue Learning Please Login
Login with Google