Tag HTML <li>

Definition and Usage

<li> Tags define list items.

<li> Tags for ordered list (<ol>)、unordered list (<ul>) and menu list (<menu>).

In <ul> and <menu>, list items are usually displayed with bullet points.

In <ol>, list items are usually displayed with numbers or letters.

Tip:Use CSS toSet list styles.

See also:

HTML Tutorial:Elenco HTML

HTML DOM Reference Manual:Li Object

CSS Tutorial:Set list styles

Instance

Example 1

An ordered (<ol>) and an unordered (<ul>) HTML list:

<ol>
  <li>Caffè</li>
  <li>Tea</li>
  <li>Latte</li>
</ol>
<ul>
  <li>Caffè</li>
  <li>Tea</li>
  <li>Latte</li>
</ul>

Prova direttamente

Example 2

Use the value attribute in an ordered list:

<ol>
  <li value="100">Coffee</li>
  <li>Tea</li>
  <li>Latte</li>
  <li>Pure Water</li>
  <li>Juice</li>
  <li>Beer</li>
</ol>

Prova direttamente

Example 3

Set different list style types (using CSS):

<ol>
  <li>Caffè</li>
  <li style="list-style-type:lower-alpha">Tea</li>
  <li>Latte</li>
</ol>
<ul>
  <li>Caffè</li>
  <li style="list-style-type:square">Tea</li>
  <li>Latte</li>
</ul>

Prova direttamente

Example 4

Create a list within a list (nested list):

<ul>
  <li>Caffè</li>
  <li>Te
    <ul>
      <li>Pu'er
      <li>Tea</li>
    </ul>
  </li>
  <li>Latte</li>
</ul>

Prova direttamente

Esempio 5

Crea una lista annidata più complessa:

<ul>
  <li>Caffè</li>
  <li>Te
    <ul>
      <li>Pu'er
      <li>Te verde
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Latte</li>
</ul>

Prova direttamente

Attributo

Attributo Valore Descrizione
value Numero Applicabile solo alle liste <ol>. Stabilisce il valore di partenza dell'elemento elenco. Gli elementi elenco successivi aumenteranno da quel numero.

Attributi globali

<li> Il tag supporta anche Attributi globali dell'HTML.

Attributi di evento

<li> Il tag supporta anche Attributi di evento nell'HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <li> Elemento:

li {
  display: list-item;
}

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto