Etiqueta <li> de HTML

Definição e uso

<li> etiqueta define o item da lista.

<li> etiqueta é usada para lista ordenada (<ol>) e lista não ordenada (<ul>) e lista de menu (<menu>).

Dentro de <ul> e <menu>, os itens da lista geralmente são exibidos com marcadores.

Dentro de <ol>, os itens da lista geralmente são exibidos com números ou letras.

Dica:Use CSS paraDefina o estilo da lista.

Veja também:

Tutorial HTML:Lista HTML

Manual de Referência HTML DOM:Objeto Li

Tutorial CSS:Defina o estilo da lista

Exemplo

Exemplo 1

uma lista ordenada (<ol>) e uma lista sem ordem (<ul>) da lista HTML:</br>

<ol>
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ol>
<ul>
  <li>Café</li>
  <li>Chá</li>
  <li>Leite</li>
</ul>

Experimente você mesmo

Exemplo 2

Use a propriedade value no lista ordenada:

<ol>
  <li value="100">Café</li>
  <li>Chá</li>
  <li>Leite</li>
  <li>Água pura</li>
  <li>Suco</li>
  <li>Cerveja</li>
</ol>

Experimente você mesmo

Exemplo 3

Defina diferentes tipos de estilos de lista (usando CSS):

<ol>
  <li>Café</li>
  <li style="list-style-type:lower-alpha">Chá</li>
  <li>Leite</li>
</ol>
<ul>
  <li>Café</li>
  <li style="list-style-type:square">Chá</li>
  <li>Leite</li>
</ul>

Experimente você mesmo

Exemplo 4

Crie uma lista (lista aninhada) na lista:

<ul>
  <li>Café</li>
  <li>Chá</li>
    <ul>
      <li>Pu'er</li>
      <li>Chá verde</li>
    </ul>
  </li>
  <li>Leite</li>
</ul>

Experimente você mesmo

Exemplo 5

Crie uma lista aninhada mais complexa:

<ul>
  <li>Café</li>
  <li>Chá</li>
    <ul>
      <li>Pu'er</li>
      <li>Chá verde</li>
        <ul>
          <li>Biluochun</li>
          <li>Longjing</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Leite</li>
</ul>

Experimente você mesmo

Atributo

Atributo Valor Descrição
value Número Apenas para lista <ol>. Determina o valor inicial do item da lista. Os itens da lista subsequentes aumentarão a partir deste número.

Atributos globais

<li> A tag também suporta Atributos globais no HTML.

Atributos de evento

<li> A tag também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <li> Elemento:

li {
  display: list-item;
}

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte