Liste in HTML

In questa lezione vedrete come definire liste in HTML, ovvero lo strumento utilizzato per mostrare elenchi numerati o puntati nelle pagine web. Nello specifico, le liste HTML rappresentano uno strumento eccellente per la creazione delle voci di menù in una navbar o per la definizione di un indice interattivo.

È possibile creare liste in HTML di due tipologie: una lista ordinata con il tag <ol> e una lista non ordinata con il tag <ul>.

<ol></ol>
<ul></ul>

Le singole voci delle liste sono espresse con il tag <li>  (list item) e rappresentano il contenuto degli elementi <ol>  o <ul>.

<ol>
  <li>Elemento ordinato 1</li>
  <li>Elemento ordinato 2</li>
  <li>Elemento ordinato 3</li>
</ol>

<ul>
  <li>Elemento non ordinato 1</li>
  <li>Elemento non ordinato 2</li>
  <li>Elemento non ordinato 3</li>
</ul>

Esistono inoltre delle liste, utilizzate molto più raramente, che permettono di creare elenchi di definizione tramite il tag  <dl>(definition list). Tali elenchi sono caratterizzati da un termine, definito con il tag  <dt>(definition term) e la relativa descrizione con il tag  <dd> (definition description). Il criterio su cui si fonda questo tipo di lista è molto simile a quello delle tabelle, dove possiamo associare una descrizione ad una parola chiave.

<dl>
  <dt>Termine</dt> 
  <dd>Descrizione del termine</dd> 
</dl>

Vediamo di seguito uno snippet di codice che vi mostra degli esempi su come scrivere correttamente queste liste.

<hgroup>
  <h2>Creare liste in HTML</h2>
  <h3>Lista non ordinata</h3>
  <h4>Linguaggi per il web più comuni</h4>
</hgroup>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
  <li>PHP</li>
</ul>
<hr />
<hgroup>
  <h3>Lista ordinata</h3>
  <h4>Routine giornaliera</h4>
</hgroup>
<ol>
  <li>Mi Sveglio alle 7:00</li>
  <li>Colazione</li>
  <li>Meditazione</li>
  <li>Esamino il piano di lavorazione del settimana</li>
  <li>Pranzo</li>
  <li>Lavoro in ufficio</li>
  <li>Preparo il materiale per il giorno successivo</li>
  <li>Netflix</li>
</ol>
<hr />
<hgroup>
  <h3>Lista di definizione</h3>
  <h4>Cosa chiedo al bar</h4>
</hgroup>
<dl>
  <dt>Caffe</dt>
  <dd>Macchiato caldo in tazzina</dd>
  <dt>Croissant</dt>
  <dd>Marmellata ai frutti di bosco</dd>
  <dt>Acqua</dt>
  <dd>Minerale naturale</dd>
</dl>

Nello snippet in alto, ho creato tre liste separate da una linea orizzontale:

  1. Una lista non ordinata di linguaggi per il web;
  2. Un elenco ordinato di azioni quotidiane;
  3. La lista di una colazione che elenca una serie di termini con delle descrizioni associate.
Approfondimento

Le liste ordinate accettano degli attributi che permettono di editare l’ordinamento, il punto di inizio della lista e la tipologia del marcatore:

  • <ol reversed>,  permette di mostrare l’elenco in modo discendente;
  • <ol start="n">, dove n indica il numero a partire dal quale iniziare la numerazione;
  • <ol type="string"> dove per string si intende un valore tra 1 (classico elenco numerico), a (elenco alfabetico minuscolo), A (elenco alfabetico maiuscolo), i (elenco con numeri romani minuscoli) e I (elenco con numeri romani maiuscoli).

Sito Web Old School [Parte 2]

Esercizio 1:  Creare liste in HTML delle vostre passioni

Riprendete il vostro sito web old school e aggiornatelo in basso con un elenco che mostra ciò di cui vi occupate in ambito professionale e hobbistico. Cercate di utilizzare tutte e tre le liste in modo da poter prendere dimestichezza con la sintassi. A tal proposito, vi propongo una sfida:

Se volessi specificare un secondo elenco annidato all’interno di un list item, cosa dovrei fare?

Provate ad aggiungere questa funzionalità ai vostri elenchi e ripetete più volte i vari passaggi. Ricordate che saper creare le liste HTML nel modo corretto, vorrà dire essere in grado di strutturare menù complessi.

Nella prossima lezione, analizzeremo un altro elemento strutturale molto comune: le tabelle.

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *