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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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>