The use of the Description List (dl) element is confusing.

Hello, I'm Yamoo. :-D

W3C Examples from HTML5 standard technical documentation make it easy to understand when to use. Let's take a look together. :-)

Example 1.

You can see the results of structuring a short list of descriptions of tequila mainstream, such as Blanco tequila and Reposado tequila. If you look at the example, it corresponds to the 'Definition Content for Term' and 'Q&A Content' you mentioned.

Term - Description group (term-description group)

<dl>

  <dt>Blanco tequila</dt>
  <dd>The purest form of the blue agave spirit...</dd>

  <dt>Reposado tequila</dt>
  <dd>Typically aged in wooden barrels for between two and eleven months...</dd>

</dl>

Example 2.

List of rock band Queen information separated by members and Record Labels. If you look at the example, you can see that the 'Introduction Content for Specific Content' you mentioned can also be structured with <dl>.

참고로 For your information, the EMI group is a British record label group and once one of the world's top four major labels.

Term - The order of term-description groups

<p>Information about the rock band Queen:</p>

<dl>

  <dt>Members</dt>
  <dd>Brian May</dd>
  <dd>Freddie Mercury</dd>
  <dd>John Deacon</dd>
  <dd>Roger Taylor</dd>

  <dt>Record labels</dt>
  <dd>EMI</dd>
  <dd>Parlophone</dd>
  <dd>Capitol</dd>
  <dd>Hollywood</dd>
  <dd>Island</dd>

</dl>

Example 3.

You can also use the <dl> element to 'list the order of commands'. I translated the content to help you understand. If you look at the sentence syntax, JavaScript conditional statements (if ~ else) are listed as sentences. You can also use a list of comments.

<p>victory points are determined as follows:<br>
(Only if the first matches of the following types)</p>

<dl>

   <dt>If you have exactly 5 gold pieces</dt>
   <dd> 5 points earned</dd>

   <dt>If you have at least one gold coin and at least one silver coin</dt>
   <dd> 2 points earned</dd>

   <dt>If you have more than one silver coin</dt>
   <dd> Earn 1 point</dd>

   <dt>Otherwise</dt>
   <dd>Don't get points.</dd>

</dl>

Review changes

Although not an example mentioned in the HTML 5.2 standard document, the <dt> element that encloses one or more <dd> elements can be configured inside <dl>. Note that the <dl> element used within <dl> can only be used to enclose one or more <dt>. The <div> and <dt> elements must not be sibling nodes.

<p>victory points are determined as follows:<br>
(Only if the first matches of the following types)</p>

<dl>

   <div>
      <dt>If you have exactly 5 gold pieces</dt>
      <dd> 5 points earned</dd>
   </div>

   <div>
      <dt>If you have at least one gold coin and at least one silver coin</dt>
      <dd> 2 points earned</dd>
   </div>

   <div>
      <dt>If you have more than one silver coin</dt>
      <dd> Earn 1 point</dd>
   </div>

   <div>
      <dt>Otherwise</dt>
      <dd>Don't get points.</dd>
   </div>

</dl>

Things to keep in mind when using

The following is a list of things to keep in mind when structuring using the <dl>, <dt> elements.

If the <dl> element does not contain a <dt> or <dd> child element, it will not be a term description group.

If the <dl> element has one or more non-blank text node sub-items, or any sub-items other than the <dt> or element, all of these text nodes and elements, as well as those sub-items, cannot form part of all term description groups. (Includes <dt>, <dd> elements)

Terminology group without description unless the <dl> element contains one or more <dt> elements.

A group of descriptive terms, unless the <dl> element contains at least one <dd> element and does not contain the <dt> element.

If the first child element of the <dl> element is the <dd> element, the first group has no associated terms.

If the last child element of the <dl> element is the <dt> element, the last group has no associated description.