coding180 icon

Coding180

HTML List: Defination List <dl>

HTML List: Defination List <dl>

Tutorials > HTML > HTML List Elements


Definition list  <dl> As its name indicates, it is used to associate a term and its definition. 
The browser is responsible for highlighting and separating the term and its definition.

In this example, We will create a list with the definition of various programming languages:

<!DOCTYPE html>
<html>

<head>
    <title>Page title</title>
    <meta charset="UTF-8">
</head>

<body>
    <dl>
        <dt>C++</dt>
        <dd>It is a programming language, designed in the middle of
            the 1980s, by Bjarne Stroustrup, as an extension of language
            of C programming.</dd>
        <dt>Java</dt>
        <dd>It is an object-oriented programming language developed
            by Sun Microsystems in the early 1990s.</dd>
        <dt>JavaScript</dt>
        <dd>It is an interpreted language, that is, it does 
not require compilation,
            mainly used in web pages, with a syntax similar to the
            of the C language.</dd>
    </dl>
</body>

</html>

The result in the browser is:

Definition dl list example - coding180

As we can see, more labels are involved than in the other two types of lists. The tags that enclose the list are dl (Definition List) and /dl

Now we must pair these two elements dt (Definition Term) and dd (Definition Description)

The browser takes care of indenting the content of the dt element

To remember the names of these HTML tags:

<dl> comes from definition list

<dt> comes from definition term

<dd> comes from definition description


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel