What is a "definition list" and how are these tags used <DL>, <DT> and <DD>?

Question

As far as I knew in HTML there were only two types of lists. Sorted Lists <ol><li> and Unordered List <ul><li>. But apparently there is a third type of list, which is the Definition List (definition list) <DL> <DT> e <DD>

• How should this type of list be used? Could you give some example?
• Do these tags have any semantic value different from other list types? Is there any good practice for them?

Answer 1

The elements <dl>, <dt> and <dd> are used together mainly for:

• Glossaries;
• List of definitions;
• Metadata (set of key-value pairs).

But the question is: what do these HTML tags mean?

The HTML element <dl> represents a description list. The widget "involves" a list of terms (specified by the element <dt>) and descriptions by the element <dd>.

I will show you three examples, one for a glossary, one for metadata and list of definitions.

1. Example for glossary:

dt {
  font-weight: bold;
}

<dl>
  <dt>Lorem ipsum</dt>
  <dd>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis mollis est, at porttitor nisi. Curabitur tempor sollicitudin turpis, eget euismod massa accumsan vitae. Vivamus efficitur vitae elit vel luctus. Sed blandit vehicula ultrices.
  </dd>
  <dt>Lorem ipsum</dt>
  <dd>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis mollis est, at porttitor nisi. Curabitur tempor sollicitudin turpis, eget euismod massa accumsan vitae. Vivamus efficitur vitae elit vel luctus. Sed blandit vehicula ultrices.
  </dd>
  <dt>Lorem ipsum</dt>
  <dd>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis mollis est, at porttitor nisi. Curabitur tempor sollicitudin turpis, eget euismod massa accumsan vitae. Vivamus efficitur vitae elit vel luctus. Sed blandit vehicula ultrices.
  </dd>
</dl>

2. Example for list of definitions (with relative stylisation, to facilitate understanding)

dl.horizontal-definition-list {
    display: table;
    min-width: 400px;
}

.horizontal-definition-list dt, .horizontal-definition-list dd {
    padding: 2% 10%;
}

.horizontal-definition-list dt {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    background: gold;
    padding-right: 10px;
}

.horizontal-definition-list dd {
    display: table-cell;
    background: silver;
}

.horizontal-definition-list dd.line-break {
    display: table-row;
}

<dl class="horizontal-definition-list">
    <dt>Termo 1</dt>
    <dd>Definição 1</dd>
    <dd class="line-break"></dd>
    
    <dt>Termo 2</dt>
    <dd>Definição 2</dd>
    <dd class="line-break"></dd>
    
    <dt>Termo 3</dt>
    <dd>Definição 3<br>(várias linhas, sem problema)</dd>
    <dd class="line-break"></dd>
</dl>

3. Example for implementing logic for metadata (value key):

<dl>
  <dt>Nome</dt>    
  <dd>João Pedro</dd>
  <dt>Ano</dt>
  <dd>2000</dd>
  <dt>Páis</dt>
  <dd>Brasil</dd>
  <dt>Cor</dt>
  <dd>Vermelho</dd>
</dl>

It is worth noting that yes, they have semantic value and are used mainly for the three examples that I pointed out here. Unlike conventional lists (without and with sort) the definition lists (as the name itself calls, <dl> Definition List) should be used in dictionaries and definitions in general, because, a <dl> does not imply an order to its content, but implies a semantics about its child elements.

In terms of use for tags I believe they can be used in those timelines, of course, with a certain stylization. Or also in the list of definitions as shown in example 3. But I see, in my opinion, its best use in documentation systems, frameworks or libraries.

Note: Never use the elements cited here in the answer (<dl>, <dt> and <dd>) to indent the contents of your page. In addition to being a bad practice takes the meanings of the elements.

References:

• Documentation of the MDN
• Question from the OS