Elenchi in HTML

1.1 Tipi di Elenchi

Gli elenchi in HTML sono uno strumento importante per organizzare e strutturare le informazioni. Permettono di visualizzare elementi con numeri o con punti in grassetto (marcatori). Vediamo in dettaglio ciascuno degli elementi degli elenchi in HTML: <ul>, <ol>, e <li>.

Elenchi non numerati (<ul>)

Il tag <ul> si usa per creare elenchi non numerati (marcati). Gli elementi dell'elenco vengono visualizzati con marcatori (punti, cerchi, quadrati).

Esempio:

    
      <ul>
        <li>Primo elemento dell'elenco</li>
        <li>Secondo elemento dell'elenco</li>
        <li>Terzo elemento dell'elenco</li>
      </ul>
    
  

Elenchi numerati (<ol>)

Il tag <ol> si usa per creare elenchi numerati. Gli elementi dell'elenco vengono visualizzati con numeri o lettere.

Esempio:

    
      <ol>
        <li>Primo elemento dell'elenco</li>
        <li>Secondo elemento dell'elenco</li>
        <li>Terzo elemento dell'elenco</li>
      </ol>
    
  

1.2 Elementi dell'elenco <li>

Il tag <li> è utilizzato per indicare ciascun elemento in un elenco, sia esso non numerato o numerato. Deve sempre essere annidato all'interno di <ul> o <ol>.

Come ricordare facilmente questi tag:

• Ordered List – elenco ordinato (numerato)
• Unordered List – elenco non ordinato (non numerato)
• List Item – elemento dell'elenco

Attributo type

Questo attributo può essere utilizzato all'interno di <ul> e <ol> per modificare il tipo di marcatori o numerazione. Ad esempio, per <ol> si possono usare i valori "1", "A", "a", "I", "i", mentre per <ul> - "disc", "circle", "square".

Esempio di modifica del tipo di marcatore per <ul>:

    
      <ul type="square">
        <li>Primo elemento dell'elenco</li>
        <li>Secondo elemento dell'elenco</li>
      </ul>
    
  

Esempio di modifica del tipo di numerazione per <ol>:

    
      <ol type="A">
        <li>Primo elemento dell'elenco</li>
        <li>Secondo elemento dell'elenco</li>
      </ol>
    
  

Attributo start:

Questo attributo si usa solo con <ol> per indicare il numero iniziale della numerazione.

Ad esempio:

    
      <ol start="5">
        <li>Quinto elemento dell'elenco</li>
        <li>Sesto elemento dell'elenco</li>
      </ol>
    
  

Elenchi annidati

Gli elenchi possono essere annidati, il che consente di creare strutture più complesse.

Esempio di elenco annidato:

    
      <ul>
        <li>Primo elemento dell'elenco</li>
          <ul type="circle">
            <li>Primo elemento annidato</li>
            <li>Secondo elemento annidato</li>
          </ul>
        <li>Secondo elemento dell'elenco</li>
        <li>Terzo elemento dell'elenco</li>
      </ul>
    
  

1.3 Stili degli elenchi

Gli elenchi possono essere stilizzati con CSS, modificando il colore dei marcatori, i tipi di marcatori e i margini.

Esempio di stilizzazione:

    
      ul.custom-list {
        list-style-type: katakana; /* Alfabeto sillabico giapponese */
        color: blue; /* Colore del testo */
      }

      ol.custom-list {
        list-style-type: hiragana-iroha; /* Sistema di ordinamento giapponese */
        color: green; /* Colore del testo */
      }
    
  

    
      <ul class="custom-list">
        <li>Primo elemento dell'elenco</li>
        <li>Secondo elemento dell'elenco</li>
      </ul>

      <ol class="custom-list">
        <li>Primo elemento dell'elenco</li>
        <li>Secondo elemento dell'elenco</li>
      </ol>
    
  

In questo modo, l'uso di <ul>, <ol>, e <li> aiuta a strutturare il contenuto e migliora la sua leggibilità sulle pagine web.