What is Description List & what is the purpose of using it in HTML ?
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.
In this article, we will discuss description lists in HTML.
Description Lists are used for:
It is used to give definitions to particular terms that we have defined in our lists. To have a dictionary type of format (term and definition of the 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 the <dl>tag.
In this, we use the data description tag <dd> we use this tag for defining the term that we have stated. for eg. If we declare the term as Pizza then we can have a 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>w3wiki problem difficulties</h1> <h2> This is Type and description of problem difficulty levels <br>at Practice platform of w3wiki. </h2> <dl> <dt>Core:</dt> <dd>Python , java</dd> <dt>Basic:</dt> <dd>c/cpp</dd> <dt>Easy:</dt> <dd> HTML </dd> <dt>Medium:</dt> <dd>DSA</dd> </dl> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head> <title>Description lists in html</title> </head> <body> <h1>w3wiki problem difficulties</h1> <h2> This is Type and description of problem difficulty levels <br>at Practice platform of w3wiki. </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:
Contact Us