Html in pillole: gli elenchi

  6 febbraio 2020

Html 5 è la più recente versione (release) del maggiormente diffuso «linguaggio di marcatura» della rete (Internet). Un linguaggio di marcatura è un metodo per contrassegnare del testo – per lo più leggibile – in modo da conferirgli una struttura.

 

Funziona in maniera elementare, con una serie di «interruttori» (tag) che «accendono» in certo punto un tipo di formattazione del testo e la «spengono» in un punto successivo. Così, per esempio se vogliamo scrivere una parola in grassetto non dovremo fare altro che mettere il tag di apertura <b> all’inizio della parola “grassetto” e alla fine terminare la formattazione con il tag di chiusura </b>.

 

Il testo con marcatura Html può essere utilizzato in due modi differenti. Uno è nella c.d. «vista codice» che si utilizza con un editor qualsiasi per vedere il testo trattato assieme ai tag applicati e serve essenzialmente per «costruire» (editare) un blocco di testo. L’altro è la c.d. «vista in lettura» che si ottiene facendo visualizzare a un browser (Chrome, Firefox, MS Edge, Opera, Safari, etc.) il blocco di testo contenuto in un file salvato con estensione .html o .htm; questa estensione dice al browser che si tratta di testo marcato con Html.

 

Html lavora in coppia con i CSS (Cascading Style Sheets), file con estensione .css che vengono «collegati» al file .html per meglio definire la visualizzazione delle varie componenti del testo strutturato. Vedremo in altra occasione come avviene il collegamento.

 

Una caratteristica interessante di Html è quella di poter creare una formattazione automatica degli elenchi. Un elemento è una lista di elementi in pila in cui ciascuna voce è riportata dopo un ritorno a capo, per meglio evidenziarla.

 

Html può costruire tre tipi di elenchi: ordinati, non ordinati e di definizione. I primi sono elenchi caratterizzati da una scaletta numerica o alfabetica; i secondi sono elenchi di voci senza un ordine preciso; i terzi sono elenchi in cui è necessario associare ad ogni voce un testo descrittivo.

 

Gli elenchi «ordinati» sono aperti dal tag <ol> e chiusi dal tag </ol>. All’interno ciascuna voce è aperta dal tag <li> e chiusa dal tag </li>. I marcatori di ciascun elemento sono numeri puntati (di default, cioè in assenza di ulteriori specificazione) ma possono essere sostituiti mediante l’utilizzo di appositi attributi inseriti in un file di stile CSS collegato al file Html.

 

Gli elenchi “non ordinati” sono aperti dal tag <ul> e chiusi dal tag </ul>. All’interno ciascuna voce è aperta dal tag <li> e chiusa dal tag </li>. I marcatori di ciascun elemento sono di default “bullet” (pallini pieni). Anche in questo caso i marcatori possono essere sostituiti mediante l’utilizzo di appositi attributi inseriti in un file di stile CSS.

 

Gli elenchi «definiti» sono aperti dal tag <dl> e chiusi dal tag </dl>. All’interno ciascuna voce è aperta dal tag <dt> e chiusa dal tag </dt> mentre la sua definizione è aperta dal tag <dd> e chiusa dal tag </dd>. La formattazione delle due parti (termine e definizione) in genere viene definita dagli attributi contenuti nel CSS.

 

Tutti gli elenchi Html possono diversi livelli all’interno delle liste, creando delle strutture «ad albero», utili a definire oggetti come menu o tassonomie. Per farlo è sufficiente inserire un nuovo elenco all’interno di un elemento precedente. I sottolivelli in genere vengono visualizzati dai browser come paragrafi rientrati rispetto al livello superiore e spesso con marcatori di elemento differenti.

 

In futuro vedremo altre caratteristiche interessanti di Html 5, che possono risultare estremamente utili nella creazione di testi digitali.