Elenchi o Liste

0
123

Elenchi <ul>, <ol> e <li>

Capita che su una pagina web si abbia la necessità di descrivere voci sottoforma di elenchi puntati, html offre questa possibilità con i tags <ul> elenchi non ordinati, <ol> elenchi ordinati e <li> per le voci di elenco. Questi tags permettono di ottenere un prodotto finale molto simile a quello che offrono programmi di videoscrittura.

Torna su


 

<li>

L’elemento <li> (list item) voce dell’elenco, da solo serve a poco perchè deve essere combinato con altri elementi descritti sotto. Non necessita della chiusura </li> ma è consigliato metterla.

Torna su


 

<ol>…</ol>

L’elemento <ol> (order list) lista ordinata, richiede al suo interno l’elemento <li> per visualizzare le voci in elenco. Serve per creare una lista ordinata e numerata di un elenco puntato di voci. Per esempio, i passi da seguire per un principiante che inizia da zero, qui su web-link, sono:

<ol>
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ol>

Questo il risultato:

  1. Primi Passi HTML
  2. Guida HTML
  3. Guida CSS
  4. Guida XHTML
  5. Guida HTML 5

Torna su


 

type

L’attributo type applicato alle liste ordinate <ol> serve per impostare il tipo di lista, avete notato nell’esempio sopra che a fianco di ogni voce ci sono dei numeri progressivi? Non li ho messo io ma il tag <ol> che per default adopera la numerazione e segue l’ordine cronologico: 1, 2, 3, e così via. Con l’attributo type si possono cambiare i numeri con una delle seguenti alternative:

type=“A” Lettere maiuscole: A , B, C, …
type=“a” Lettere minuscole: a, b, c, …
type=“I” Numerazione romana maiuscola: I, II, III, …
type=“i” Numerazione romana minuscola: i, ii, iii, …
type=“l” I numeri come da default: 1, 2, 3, …

<ol type=“a”>
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ol>

Questo il risultato:

  1. Primi Passi HTML
  2. Guida HTML
  3. Guida CSS
  4. Guida XHTML
  5. Guida HTML 5

Torna su


 

start

L’attributo start cambia il valore iniziale nel caso in cui si volesse partire da un qualsiasi numero diverso da “1”, o da una lettera diversa da “a”, sarà sufficiente usare l’attributo start impostando il valore alfanumerico da cui iniziare l’incremento.

<ol start=“15”>
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ol>

Questo il risultato:

  1. Primi Passi HTML
  2. Guida HTML
  3. Guida CSS
  4. Guida XHTML
  5. Guida HTML 5

Vediamo un esempio anche nel caso in cui si adoperino le lettere. Dovendo iniziare dalla lettera “C” ed essendo questa la terza lettera dell’alfabeto, si dovrà inserire il numero “3”:

<ol type=“a” start=“3”>
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ol>

Questo il risultato:

  1. Primi Passi HTML
  2. Guida HTML
  3. Guida CSS
  4. Guida XHTML
  5. Guida HTML 5

Torna su


 

<ul>…</ul>

L’elemento <ul> (unorder list) lista non ordinata, richiede al suo interno l’elemento <li> per visualizzare le voci in elenco. Serve per creare una lista non ordinata di un elenco puntato di voci.

<ul>
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ul>

Questo il risultato:

  • Primi Passi HTML
  • Guida HTML
  • Guida CSS
  • Guida XHTML
  • Guida HTML 5

Torna su


 

type

L’attributo type applicato alle liste non ordinate <ul> serve per cambiare il simbolo alle voci della lista. Avete notato nell’esempio sopra che a fianco di ogni voce ci sono dei pallini pieni? Non li ho messo io ma il tag <ul> che per default adopera questo pallino. Con l’attributo type si possono cambiare in cerchietti (circle) o quadratini (square).

type=“disc” disco solido
type=“circle” cerchietto
type=“square” quadrato

<ul type=“circle”>
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ul>

Questo il risultato:

  • Primi Passi HTML
  • Guida HTML
  • Guida CSS
  • Guida XHTML
  • Guida HTML 5

 

<ul type=“square”>
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ul>

Questo il risultato:

  • Primi Passi HTML
  • Guida HTML
  • Guida CSS
  • Guida XHTML
  • Guida HTML 5
 

Consiglio: l’uso dei fogli di style permette un controllo molto più accurato e versatile, ad esempio come inserire una qualsiasi immagine grafica al posto di uno dei simboli standard.

ol { list-style-image: url(file:nome_immagine.gif); } 

La proprietà list-style-image è in grado di richiamare una piccola immagine grafica da usare al posto del pallino.

Questo il risultato:

  1. Primi Passi
  2. Guida HTML
  3. Guida CSS
  4. XHTML con Style

Torna su


 

dir

L’attributo dir serve ad invertire la posizione dei simboli nel caso in cui la numerazione o il simbolo lo si volesse a destra della lista anziché a sinistra. L’attributo dir può essere usato sia per le liste ordinate <ol& che per quelle non ordinate <ul> impostando il valore rtl destro (sinistro ltr).

<ul dir=“rtl” type=”square”>
<li>primi passi HTML</li>
<li>Guida HTML</li>
<li>Guida CSS</li>
<li>Guida XHTML</li>
<li>Guida HTML 5</li>
</ul>

Questo il risultato:

  • Primi Passi HTML
  • Guida HTML
  • Guida CSS
  • Guida XHTML
  • Guida HTML 5

Questo attributo è deprecato e non più supportato da HTML 5

Torna su


 

Elenchi di definizione

Con gli elementi <dt>, <dd> e <dl> è possibile creare Elenchi di definizione, dove con <dt> si definisce il termine e con <dd> la sua definizione o descrizione. Il tutto racchiuso in una struttura <dl>

<dl>…</dl>

L’elemento <dl> prevede al suo interno gli elementi <dt> e <dd> come voci dell’elenco. Serve per una visualizzazione non ordinata e formata da due voci: un termine (dt) e la sua definizione (dd).

<dl>
<dt>principianti</dt><dd>rubrica primi passi</dd>
<dt>intermedi</dt><dd>guida html5 e guida CSS</dd>
</dl>

Questo il risultato:

principianti
rubrica primi passi
intermedi
guida html5 e guida CSS

 

<dt>…</dt>

L’elemento <dt> specifica il termine e da solo non ha senso, deve precedere l’elemento dd che serve per la sua definizione. Usato anche nei dialoghi dove con dt si identifica chi parla e dd le sue parole.

<dl>
<dt>Andrea</dt><dd>Oggi è una bella giornata.</dd>
<dt>Toni</dt><dd>si, molto meglio di quella di ieri</dd>
</dl>
Andrea
Oggi è una bella giornata.
Toni
si, molto meglio di quella di ieri.

 

<dd>…</dd>

L’elemento <dd> specifica la definizione e da solo non ha senso, deve seguire l’elemento <dt> che specifica il termine. Usato anche nei dialoghi dove con <dt> si identifica chi parla e <dd> le sue parole.

<dl>
<dt>Andrea</dt><dd>Oggi è una bella giornata.</dd>
<dt>Toni</dt><dd>si, molto meglio di quella di ieri</dd>
</dl>
Andrea
Oggi è una bella giornata.
Toni
si, molto meglio di quella di ieri.

 

Consiglio non usate le liste per l’indentazione o i ritorni a capo, per questo ci sono appositi attributi da dichiarare nei CSS.

A proposito di CSS i vari menù orizzontali che si trovano ad inizio pagina sono fatti proprio da liste ordinate e non opportunamente ridefinite all’interno di un CSS. Per saperne di più a riguardo di questo tipo di menù si veda questa pagina.Torna su


Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

PS: vuoi imparare a usare l'HTML come un vero professionista in pochissimo tempo?

Segui il miglior video corso di HTML

corso HTML5

Impara la tecnologia che sta ALLA BASE del mondo Internet di oggi, in particolar modo se vuoi creare siti facilmente indicizzabili e responsive.

12345
33 Recensioni, aggiornato l'8 agosto 2018

CONDIVIDI
Articolo precedenteLe Tabelle
Prossimo articoloForm o Moduli
La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here