In HTML un elemento di particolare interesse sono gli elenchi numerati e puntati avanzati che generiamo tramite i tag dl – dt – dd.

Vediamo un esempio pratico nel seguente codice:

<!DOCTYPE html>
<html>
 
<head>
<title>Titolo del documento</title>
</head>
 
<body>

<p>Elenchi avanzati</p>

<dl><!-- Contenitore della lista INIZIO --!>

  <dt>Automobile</dt><!-- Termine da definire --!>

    <dd>Veicolo a quattro ruote</dd><!-- Definizione --!>

       <ol><!-- Elenco ordinato INIZIO --!>

          <li>Volante</li><!-- Voci lista --!>
          <li>Ruote</li>
          <li>Motore

            <ul> <!-- Questa lista puntata è annidata all'interno della lista ordinata --!>
              <li>Pistoni</li>
              <li>Volano</li>
            </ul>

          </li>

        </ol><!-- Elenco ordinato FINE --!>

  <dt>Ciclomotore</dt>

    <dd>Veicolo a due ruote</dd>

</dl><!-- Contenitore della lista FINE --!>

</body>
 
</html>

L’effetto finale qui sotto:

Elenchi avanzati

Automobile
Veicolo a quattro ruote
  1. Volante
  2. Ruote
  3. Motore
    • Pistoni
    • Volano
Ciclomotore
Veicolo a due ruote

Analizzando la sintassi avremo:
dl= contenitore della lista
dt= termine da definire
dd= definizione

ol= elenco ordinato – ordered list
ul= elenco puntato – unordered list
li= la singola voce di elenco – list

Il mio sito ufficiale>