Tag HTML <ul>


Esempio

Un elenco HTML non ordinato:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Altri esempi "Provalo da solo" di seguito.


Definizione e utilizzo

Il <ul>tag definisce un elenco non ordinato (puntato).

Usa il <ul>tag insieme al tag <li> per creare elenchi non ordinati.

Suggerimento: usa i CSS per applicare uno stile agli elenchi .

Suggerimento: per gli elenchi ordinati, utilizza il tag <ol>


Supporto browser

Element
<ul> Yes Yes Yes Yes Yes

Attributi globali

Il <ul>tag supporta anche gli attributi globali in HTML .


Attributi dell'evento

Il <ul>tag supporta anche gli attributi dell'evento in HTML .



Altri esempi

Esempio

Imposta i diversi tipi di stile di elenco (con CSS):

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Esempio

Espandi e riduci l'altezza della riga negli elenchi (con CSS):

<ul style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Esempio

Crea un elenco all'interno di un elenco (un elenco annidato):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Esempio

Crea un elenco nidificato più complesso:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Pagine correlate

Esercitazione HTML: Elenchi HTML

Riferimento HTML DOM: Ul Object

Esercitazione CSS: Liste di stili


Impostazioni CSS predefinite

La maggior parte dei browser visualizzerà l' <ul>elemento con i seguenti valori predefiniti:

Esempio

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}