HTML: le liste

Liste in html

Utilizzare gli elenchi o liste in linguaggio di markup HTML  è una soluzione molto efficace, in quanto ci permette di organizzare al meglio i contenuti delle nostre pagine web, ci  aiuta a semplificare e sintetizzare  i concetti che vogliamo esprimere e rende il testo velocemente fruibile all' utente internet, un tipo di lettore che nella maggior parte dei casi legge un documento web scorrendolo rapidamente.

Ci sono tre tipi di elenchi o liste: liste ordinate, liste non ordinate e liste di definizione

Le liste ordinate e non ordinate si costruiscono in questo modo: si apre il tag elenco <UL> oppure <OL>, si inseriscono i vari termini della lista con il tag <LI></LI>, si chiude il TAG elenco </UL> oppure <OL>. 

 

<elenco>
 <elemento della lista>nome del primo elemento</elemento della lista>
 <elemento della lista>nome del secondo elemento</elemento della lista>
</elenco> 

 

Liste ordinate:

Gli elenchi ordinati sono descritte utilizzando il TAG OL (ordered list) delle liste di elementi contraddistinti da una numerazione crescente.

<ol>
     <li>primo elemento</li>
     <li>secondo elemento</li>
     <li>terzo elemento</li>
</ol>

 

  1. primo elemento
  2. secondo elemento
  3. terzo elemento

Gli elenchi ordinati hanno un'attributo TYPE, che permette di cambiare il tipo di numerazione:

type="1"

corrisponde all'elenco numerato che abbiamo descritto precedentemente, se il l'attributo type non viene inserito quindi il tipo di numerazione corrisponde a questa appena citata, cioè quella dei numeri arabi;

type="a"

  1. primo
  2. secondo
  3. terzo

questo attributo indica una enumerazione per lettere dell'alfabeto minuscole;

type="A"

  1. primo
  2. secondo
  3. terzo

questo attributo indica una enumerazione per lettere dell'alfabeto maiuscole;

type="i"

  1. primo
  2. secondo
  3. terzo

questo attributo indica una enumerazione per numeri romani minuscoli;

type="I

  1. primo
  2. secondo
  3. terzo

questo attributo indica una enumerazione per numeri romani maiuscoli;

Liste non ordinate:

gli elenchi non ordinati sono creati utilizzando il TAG <UL> (unordered list) e corrispondono agli elenchi puntati:

<ul>
  <li>primo elemento</li>
  <li>secondo elemento</li>
  <li>terzo elemento</li>
</ul>
  • primo elemento
  • secondo elemento
  • terzo elemento

Hanno un attributo TYPE che ne contraddistingue il tipo di disegno:

type="disc"

è l'attributo di default (cioè se l'attributo type non viene dichiarato, il disegno della lista non ordinata prenderà questo segno, come mostrato nell'esempio precedente) e indica un disco pieno

type="circle"

<ul type="circle">
  <li>primo elemento</li>
  <li>secondo elemento</li>
  <li>terzo elemento</li>
</ul>
  • primo elemento
  • secondo elemento
  • terzo elemento

l'attributo type="circle" indica il disegno si un disco vuoto"

type="square"

<ul type="square">
  <li>primo elemento</li>
  <li>secondo elemento</li>
  <li>terzo elemento</li>
</ul>
  • primo elemento
  • secondo elemento
  • terzo elemento

l'attributo type="square" indica il disegno si un quadrato pieno".

Esistono anche altri attirbuti per indentificare il disegno di una lista non ordinata, anche se non sono molto utilizzati in quanto non supportati da tutti i browser.

Annidamento di più liste:

gli elenchi ordinati e non ordinati possono essere annidati, cioè inseriti uno dentro l'altro. Il disegno grafico cambia in automatico al variare dell’annidamento della lista. Ad esempio:

<ul>
    <li>primo elemento della 1a lista</li>
    <li>secondo elemento della 1a lista
       <ul>
           <li>primo elemento della 2a lista</li>
           <li>secondo elemento della 2a lista
              <ul>
                  <li>primo elemento della 3a lista</li>
              </ul>
           </li>
           <li>terzo elemento della 2a lista</li>
       </ul>
    </li>
</ul>
  • primo elemento della 1a lista
  • secondo elemento della 1a lista
    • primo elemento della 2a lista
    • secondo elemento della 2a lista
      • primo elemento della 3a lista
    • terzo elemento della 2a lista

Liste di definizione:

Le liste od elenchi di definizione sono individuati dal TAG <DL> e gli elementi listati  non hanno un disegno identificativo. Il termine da descrivere è identificato dal TAG <DT>, mentre la sua descrizione dal TAG <DD> :

<dl>
      <dt>leone</dt>
      <dd>è un mammifero della famiglia dei felini </dd>
      <dt>cavallo</dt>
      <dd>è un mammifero della famiglia degli equini</dd>
</dl>
leone
è un mammifero della famiglia dei felini
cavallo
è un mammifero della famiglia degli equini