W3docs
pt
Entrar

Tag HTML <li>

A tag <li> define itens de lista em HTML. Descrição da tag, atributos e exemplos práticos.

A tag HTML <li> define um único item dentro de uma lista HTML. Ela é filha dos elementos <ul> (lista não ordenada), <ol> (lista ordenada) ou <menu>. Em listas não ordenadas e menus, os itens são exibidos com um marcador de ponto por padrão. Em listas ordenadas, cada item recebe um número ou letra à esquerda que aumenta automaticamente.

Esta página aborda a sintaxe de <li>, o atributo value, como estilizar marcadores de lista com CSS e notas de acessibilidade para leitores de tela.

Sintaxe

Um item de lista é escrito entre as tags de abertura <li> e fechamento </li>:

<li>List item text</li>

<li> é um elemento de conteúdo de fluxo: cada item começa em uma nova linha e ocupa toda a largura disponível.

No HTML5, a tag de fechamento </li> é opcional — o navegador fecha o elemento automaticamente quando encontra o próximo <li> ou o fim da lista pai. Ainda assim, incluir </li> é recomendado para melhorar a legibilidade e evitar surpresas em ferramentas.

Exemplo de listas ordenadas e não ordenadas:

Lista de menu — Exemplo da 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>
Experimente Você Mesmo »

O Atributo value

O atributo value define o número ordinal de um item de lista. Ele funciona apenas em elementos <li> dentro de uma lista ordenada (<ol>) e é ignorado em listas não ordenadas.

Definir value não altera apenas aquele item — a numeração continua a partir dele. No exemplo abaixo, o primeiro item é forçado ao valor 5, então os itens seguintes se tornam 6 e 7 automaticamente:

5. Coffee
6. Tea
7. Coca Cola

Para alterar apenas onde toda a lista começa, prefira o atributo start no elemento <ol>. Use value quando precisar substituir o número de um item específico no meio de uma lista.

Perigo

O valor do atributo value deve ser um número inteiro válido. Valores negativos são permitidos.

Exemplo do atributo 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>
Experimente Você Mesmo »

Estilizando o Marcador de Item de Lista

Para estilizar o elemento <li>, você pode usar as propriedades CSS list-style, list-style-type, list-style-image e list-style-position.

Exemplo de estilização do marcador de item de lista:

Propriedade 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>
Experimente Você Mesmo »

Você pode substituir os marcadores de ponto por uma imagem usando a propriedade CSS list-style-image.

Exemplo de marcador com imagem:

Propriedade 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>
Experimente Você Mesmo »

A propriedade CSS list-style-position especifica se o marcador de lista deve aparecer dentro ou fora da caixa do item de lista.

Exemplo de posicionamento interno e externo do marcador:

Propriedade 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>
Experimente Você Mesmo »

Atributos

AtributoValorDescrição
type1, A, a, I, i, disc, square, circleDefine o tipo de marcador para listas ordenadas ou não ordenadas. Este atributo está obsoleto no HTML5. Use as propriedades CSS list-style-type ou list-style-image em seu lugar.
valuenumberEspecifica o valor numérico do item de lista. Valores negativos são permitidos. Funciona apenas com o elemento <li> dentro de uma lista ordenada.

A tag <li> suporta os Atributos Globais e os Atributos de Evento.

Selecionando <li> com CSS

Além do marcador, você pode estilizar a caixa do item como qualquer outro elemento. Use o seletor de tipo li para alcançar todos os itens de lista, ou limite-o a uma lista específica com uma classe ou seletor descendente:

<!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>

O pseudo-elemento ::marker estiliza o marcador ou número sem afetar o texto do item — útil para recolorir ou redimensionar marcadores.

Acessibilidade

Os leitores de tela tratam as listas como um grupo: eles anunciam a lista, o número total de itens e a posição de cada item (por exemplo, "lista, 3 itens, item 1"). Esse contexto ajuda os usuários a entenderem a estrutura, portanto, mantenha itens relacionados dentro de um único <ul> ou <ol> em vez de simular uma lista com <div>s e quebras de linha.

Aviso

Remover os marcadores com list-style: none pode fazer com que o VoiceOver do Safari pare de reconhecer o elemento como uma lista, de modo que a contagem de itens não seja mais anunciada. Se você remover os marcadores para menus de navegação, adicione role="list" de volta ao <ul> para preservar a semântica de lista.

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

Tags relacionadas

  • <ul> — lista não ordenada (com marcadores)
  • <ol> — lista ordenada (numerada)
  • <menu> — uma lista de comandos ou itens de menu
  • Listas HTML — visão geral de todos os tipos de lista

Prática

Prática
O que a tag HTML li define?
O que a tag HTML li define?
Prática
Em uma lista ordenada, o que acontece quando você define value=5 no primeiro item li?
Em uma lista ordenada, o que acontece quando você define value=5 no primeiro item li?
Was this page helpful?