W3docs
it
Accedi

Tag HTML <li>

Il tag <li> definisce gli elementi di lista in HTML. Descrizione del tag, attributi ed esempi.

Il tag HTML <li> definisce un singolo elemento all'interno di una lista HTML. È figlio degli elementi <ul> (lista non ordinata), <ol> (lista ordinata) o <menu>. Nelle liste non ordinate e nei menu, gli elementi vengono visualizzati con un punto elenco per impostazione predefinita. Nelle liste ordinate, ogni elemento riceve un numero o una lettera sul lato sinistro che aumenta automaticamente.

Questa pagina tratta la sintassi di <li>, l'attributo value, come applicare stili ai marcatori di lista con CSS e note sull'accessibilità per gli screen reader.

Sintassi

Un elemento di lista si scrive tra i tag di apertura <li> e di chiusura </li>:

<li>List item text</li>

<li> è un elemento di contenuto di flusso: ogni elemento inizia su una nuova riga e occupa tutta la larghezza disponibile.

In HTML5 il tag di chiusura </li> è facoltativo — il browser chiude l'elemento automaticamente quando incontra il successivo <li> o la fine della lista padre. Si raccomanda comunque di includere </li> per leggibilità e per evitare comportamenti imprevisti negli strumenti di sviluppo.

Esempio di liste ordinate e non ordinate:

Lista menu — Esempio del tag HTML <li> — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>Ordered list</p>
    <ol>
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ol>
    <p>Unordered list</p>
    <ul>
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>
Provalo tu stesso »

L'attributo value

L'attributo value imposta il numero ordinale di un elemento di lista. Funziona solo sugli elementi <li> all'interno di una lista ordinata (<ol>) e viene ignorato nelle liste non ordinate.

Impostare value non cambia solo quell'elemento — la numerazione continua da esso. Nell'esempio seguente il primo elemento viene forzato a 5, quindi gli elementi successivi diventano automaticamente 6 e 7:

5. Coffee
6. Tea
7. Coca Cola

Per cambiare solo il punto di partenza dell'intera lista, è preferibile usare l'attributo start sull'elemento <ol>. Usa value quando hai bisogno di sovrascrivere il numero di un elemento specifico nel mezzo di una lista.

Pericolo

Il valore dell'attributo value deve essere un numero intero valido. Sono ammessi valori negativi.

Esempio dell'attributo value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <ol>
      <li value="5">Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
  </body>
</html>
Provalo tu stesso »

Applicare stili al marcatore dell'elemento di lista

Per applicare stili all'elemento <li>, puoi usare le proprietà CSS list-style, list-style-type, list-style-image e list-style-position.

Esempio di stile del marcatore dell'elemento di lista:

Proprietà list-style-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.a {
        list-style-type: circle;
      }
      ul.b {
        list-style-type: square;
      }
      ol.c {
        list-style-type: upper-roman;
      }
      ol.d {
        list-style-type: lower-alpha;
      }
    </style>
  </head>
  <body>
    <h1>The list-style-type property</h1>
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
  </body>
</html>
Provalo tu stesso »

È possibile sostituire i punti elenco con un'immagine usando la proprietà CSS list-style-image.

Esempio di marcatore con immagine:

Proprietà list-style-image

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: url("https://api.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
      }
    </style>
  </head>
  <body>
    <h2>List-style-image property example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>
Provalo tu stesso »

La proprietà CSS list-style-position specifica se il marcatore di lista deve apparire all'interno o all'esterno del riquadro dell'elemento di lista.

Esempio di posizionamento interno ed esterno del marcatore:

Proprietà list-style-position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        border: 1px solid #666;
        padding: 5px;
      }
      .inside {
        list-style-position: inside;
      }
      .outside {
        list-style-position: outside;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "inside".</p>
    <ul class="inside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
    <p>Here the list-style is positioned "outside".</p>
    <ul class="outside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>
Provalo tu stesso »

Attributi

AttributoValoreDescrizione
type1, A, a, I, i, disc, square, circleDefinisce il tipo di punto elenco per le liste ordinate o non ordinate. Questo attributo è obsoleto in HTML5. Usa invece le proprietà CSS list-style-type o list-style-image.
valuenumberSpecifica il valore numerico dell'elemento di lista. È possibile usare valori negativi. Funziona solo con l'elemento <li> all'interno di una lista ordinata.

Il tag <li> supporta gli Attributi Globali e gli Attributi di Evento.

Selezionare <li> con CSS

Oltre al marcatore, puoi applicare stili al riquadro dell'elemento come a qualsiasi altro elemento. Usa il selettore di tipo li per raggiungere tutti gli elementi di lista, oppure limitalo a una lista specifica con una classe o un selettore discendente:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* All list items on the page */
      li {
        padding: 8px;
        line-height: 1.6;
      }
      /* Only items inside lists with class "menu" */
      ul.menu > li {
        list-style: none;
        border-bottom: 1px solid #ddd;
      }
      /* Style the marker color separately */
      li::marker {
        color: #0a7cff;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </body>
</html>

Lo pseudo-elemento ::marker applica stili al punto elenco o al numero senza influenzare il testo dell'elemento — utile per cambiare colore o ridimensionare i marcatori.

Accessibilità

Gli screen reader trattano le liste come un gruppo: annunciano la lista, il numero totale di elementi e la posizione di ciascun elemento (ad esempio, "lista, 3 elementi, elemento 1"). Questo contesto aiuta gli utenti a comprendere la struttura, quindi mantieni gli elementi correlati all'interno di un unico <ul> o <ol> invece di simulare una lista con <div> e interruzioni di riga.

Attenzione

Rimuovere i punti elenco con list-style: none può far sì che VoiceOver di Safari smetta di riconoscere l'elemento come lista, impedendo così l'annuncio del numero di elementi. Se rimuovi i marcatori per i menu di navigazione, aggiungi role="list" all'<ul> per preservare la semantica della lista.

<ul role="list" style="list-style: none;">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Tag correlati

  • <ul> — lista non ordinata (con punti elenco)
  • <ol> — lista ordinata (numerata)
  • <menu> — una lista di comandi o voci di menu
  • Liste HTML — panoramica di tutti i tipi di lista

Esercitati

Pratica
Cosa definisce il tag HTML li?
Cosa definisce il tag HTML li?
Pratica
In una lista ordinata, cosa succede quando imposti value=5 sul primo elemento li?
In una lista ordinata, cosa succede quando imposti value=5 sul primo elemento li?
Was this page helpful?