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
- Volante
- Ruote
- 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