Liste in HTML

Lista non ordinata HTML

Una lista non ordinata inizia con il tag <ul>. Ogni elemento della lista inizia con il tag <li>.

Gli elementi della lista saranno contrassegnati da punti (piccoli cerchi neri) per impostazione predefinita:

<ul>
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ul>

Lista ordinata HTML

Una lista ordinata inizia con il tag <ol>. Ogni elemento della lista inizia con il tag <li>.

Gli elementi della lista saranno contrassegnati con numeri per impostazione predefinita:

<ol>
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>

L’attributo “type” della Lista Ordinata

L’attributo “type” del tag <ol> definisce il tipo di marcatore degli elementi della lista:

type=“1” Gli elementi della lista saranno numerati con numeri (predefinito)
type=“A” Gli elementi della lista saranno numerati con lettere maiuscole
type=“a” Gli elementi della lista saranno numerati con lettere minuscole
type=“I” Gli elementi della lista saranno numerati con numeri romani maiuscoli
type=“i” Gli elementi della lista saranno numerati con numeri romani minuscoli

Numeri:

<ol type="1">
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>

Lettere maiuscole:

<ol type="A">
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>

Lettere minuscole:

<ol type="a">
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>

Numeri romani maiuscoli:

<ol type="I">
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>

Numeri romani minuscoli:

<ol type="i">
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>

Conteggio della lista

Per impostazione predefinita, una lista ordinata inizia a conteggiare da 1. Se si desidera iniziare il conteggio da un numero specificato, è possibile utilizzare l’attributo “start”:

<ol start="50">
  <li>Caffè</li>
  <li>Tè</li>
  <li>Latte</li>
</ol>

Liste annidate

É possibile annidare liste tra di loro, sia <ol> che <ul>. Ecco un esempio:

<ol>
  <li>Caffè</li>
  <li>
    Tè
    <ol>
      <li>Tè Nero</li>
      <li>Tè Verde</li>
    </ol>
  </li>
  <li>Latte</li>
</ol>

Le liste descrittive in HTML

Una lista di descrizione è una lista di termini, con una descrizione di ciascun termine.

Il tag <dl> definisce la lista di descrizione, il tag <strong> definisce il termine (nome) e il tag <dd> descrive ciascun termine:

<dl>
  <strong>Caffè</strong>
  <dd>- bevanda calda nera</dd>
  <strong>Latte</strong>
  <dd>- bevanda fredda bianca</dd>
</dl>