HTML
elenchi

introduzione

Sintassi

• <ol> ordered list items </ol>
• <ul> unordered list items </ul>
• <li> list item (ordered and not) </li>
• <dl> description list items </dl>
• <dt> description list title </dt>
• <dd> description list description </dd>

Osservazioni

Lista non ordinata

Un elenco non ordinato può essere creato con il tag <ul> e ogni elemento di elenco può essere creato con il tag <li> come mostrato nell'esempio seguente:

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

Questo produrrà un elenco puntato (che è lo stile predefinito):

• Articolo
• Un altro oggetto
• Ancora un altro oggetto

Dovresti usare ul per visualizzare un elenco di elementi, in cui l'ordine degli articoli non è importante. Se la modifica dell'ordine degli articoli rende l'elenco errato, è necessario utilizzare <ol> .

Lista ordinata

Un elenco ordinato può essere creato con il tag <ol> e ogni elemento di elenco può essere creato con il tag <li> come nell'esempio seguente:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Questo produrrà un elenco numerato (che è lo stile predefinito):

1. Articolo
2. Un altro oggetto
3. Ancora un altro oggetto

Modifica manuale dei numeri

Ci sono un paio di modi in cui puoi giocare con quali numeri appaiono sugli elementi di lista in un elenco ordinato. Il primo modo è impostare un numero iniziale, usando l'attributo start . L'elenco inizierà da questo numero definito e continuerà ad aumentare di uno come al solito.

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

Questo produrrà un elenco numerato (che è lo stile predefinito):

3. Articolo
4. Qualche altro oggetto
5. Ancora un altro oggetto

È inoltre possibile impostare in modo esplicito un determinato elemento di elenco su un numero specifico. Ulteriori elementi dell'elenco dopo uno con un valore specificato continueranno ad aumentare di uno dal valore di quell'elemento dell'elenco, ignorando dove si trovava l'elenco genitore.

<li value="7"></li>

Vale anche la pena notare che, utilizzando l'attributo value direttamente su un elemento della lista, è possibile sovrascrivere il sistema di numerazione esistente di un elenco ordinato riavviando la numerazione ad un valore inferiore. Quindi, se l'elenco genitore aveva già raggiunto il valore 7 e aveva rilevato un elemento di elenco al valore 4, quell'elemento dell'elenco sarebbe ancora visualizzato come 4 e continuerà a contare da quel punto nuovamente.

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Quindi l'esempio sopra produrrà una lista che segue il modello di numerazione di 5, 6, 4, 5, 6 - ricominciando da un numero inferiore al precedente e duplicando il numero 6 nella lista.

Nota: gli attributi start e value accettano solo un numero, anche se l'elenco ordinato è impostato per la visualizzazione come numeri o lettere in caratteri romani.

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Modifica del tipo di numero

Puoi facilmente cambiare il tipo di numero mostrato nel marcatore dell'elemento di lista usando l'attributo type

<ol type="1|a|A|i|I">

È necessario utilizzare ol per visualizzare un elenco di elementi, in cui gli articoli sono stati ordinati intenzionalmente e l'ordine deve essere enfatizzato. Se la modifica dell'ordine degli articoli NON rende l'elenco errato, devi usare <ul> .

Elenco di descrizione

Un elenco di descrizione (o elenco di definizioni , come veniva chiamato prima di HTML5) può essere creato con l'elemento dl . Consiste di gruppi nome-valore, dove il nome è dato nell'elemento dt e il valore è dato nell'elemento dd .

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

Dimostrazione dal vivo

Un gruppo nome-valore può avere più di un nome e / o più di un valore (che rappresentano alternative):

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

Dimostrazione dal vivo

Liste annidate

È possibile nidificare elenchi per rappresentare voci secondarie di un elemento di elenco.

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>

• articolo 1
• elemento 2
  • sotto-voce 2.1
  • sottovoce 2.2
• articolo 3

L'elenco nidificato deve essere figlio dell'elemento li .

Puoi nidificare anche diversi tipi di lista:

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>