html

What Kind of HTML List Would be Good for Displaying a List of Terms With Their Definitions

In HTML, you mostly have heard of ordered and unordered lists. Ordered list is used when we need to arrange data in a specific sequence whereas unordered list is used where we just need to create a list of items and the sequence doesn’t matter.

If you are wandering about, what kind of list would be good for displaying a list of terms with their definitions? Then this write-up will help you to display a
list which contains items and their definitions. The outcomes of this guide are:

  • What kind of list is used for displaying the list of terms with their definitions?
  • How do we create a description list in HTML?

What Type of List is Used to Display the List of Terms and Their Definitions?

In HTML, a description list is used for creating a list of items with their short description. Description list is almost the same as the ordered and unordered list. The key difference is that description list allows you to write a short definition of the terms. The components of the description list are as follows:

  • <dl> tag: Used to create a description list
  • <dt> tag: Utilized to specify the terms or items of the list
  • <dd> tag: This tag is used to write the appropriate description of the term/item

How do we create a description list in HTML?

To create a description list, you must use the <dl>, <dt>, and <dd> tag in a hierarchical structure. For a better understanding, the following example code is provided which is used to create a description list.

Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>First Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 style="color:crimson;">Description List</h1>
        <dl>
            <dt>Milk</dt>
            <dd>This item is very beneficial for human body.</dd>
            <dt>Mango</dt>
            <dd>This item is said to the king of fruits.</dd>
            <dt>Spinach</dt>
            <dd>This item is very rich in iron and nutrients</dd>
        </dl>
    </body>
</html>

In this code, the <dl> tag defines that the description will start here. Inside the <dl> tag, the <dt> tag represents the terms. After each <dt> tag, a <dd> tag is exercised which defines that specific term.

Output

The output clearly shows that the description list is created successfully, and it is also good to display terms and their definitions.

Conclusion

In HTML, the description lists are said to be good for displaying a list of terms with their definitions. The <dl> tag is used for creating a description list. The <dt> and <dd> tags specify terms and their definitions respectively. We have provided a practical example that showcases the creation of a description list in HTML.

About the author

Adnan Shabbir