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

Navigation
3

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

  • How should this type of list be used? Could you give some examples?
  • Does this tag have any semantic value different from the other list types? Is there any good practice for them?
asked by anonymous 08.10.2018 / 19:26

1 answer

3

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 list of description. The element   "involves" a list of terms (specified by the <dt> element) and   descriptions by element <dd> .

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

  • Glossary example: 

    • 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>
  • Example for list of definitions (with relative stylization, for ease of 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>
  • Example to implement logic for metadata (key-value): 

    • <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>

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

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

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

    References:

    08.10.2018 / 20:04
    What is the best to use, scanf or get_s? in c Grid problems in Bootstrap