Explain Description Lists in HTML - GeeksforGeeks

04 Jan, 2022
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>    <h1>GeeksForGeeks Courses</h1>     <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>    <h1>GeeksForGeeks problem difficulties</h1>     <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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
nnr223442
HTML-Questions
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript