Docs executáveis de HTML: Listas

Q: Como fazer uma lista com marcadores no HTML?

Use uma lista não ordenada: com um para cada item, por exemplo Milk Eggs . O navegador desenha um marcador antes de cada item e recua a lista.

Q: Como tirar os marcadores de uma lista no HTML?

Defina list-style: none no pelo CSS. Defina também padding-inline-start: 0 (ou padding: 0) para remover o recuo que o navegador adiciona para os marcadores.

Q: Como começar uma lista ordenada em outro número?

Use o atributo start: numera o primeiro item como 5. reversed conta de trás para frente, e value num define o número desse item e dos seguintes.

Q: Como fazer uma lista dentro de outra no HTML?

Coloque o ou interno dentro de um da lista externa, depois do texto desse item. Uma lista colocada direto dentro de outro , entre elementos , é inválida.

Listas em HTML: ul, ol e li

O HTML tem duas listas principais. <ul> (unordered list, lista não ordenada) mostra marcadores, e <ol> (ordered list, lista ordenada) mostra números. Cada item é um <li> (list item).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Use <ol> quando a ordem significa algo (passos, rankings, um sumário) e <ul> quando não significa. Os leitores de tela anunciam as duas como listas com uma contagem, como "lista, 3 itens", e por isso uma lista de verdade é melhor que linhas que começam com um "•" ou "1." digitado.

Uma lista só pode conter elementos <li> diretamente. Todo o resto, inclusive títulos, parágrafos e outras listas, vai dentro de um <li>.

Estilos de marcador

list-style-type no <ul> muda o marcador. O pseudo-elemento ::marker estiliza o próprio marcador ou número, separado do texto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

Um valor em string usa esse texto como marcador. "\2713 " é um sinal de visto seguido de um espaço: o primeiro espaço só encerra o escape \2713. ::marker aceita poucas propriedades, principalmente color, font-size e outras propriedades de fonte, o que cobre o pedido comum de "marcadores coloridos" sem marcação extra.

Listas ordenadas: números, letras e algarismos romanos

<ol> tem atributos para a numeração:

Atributo	Exemplo	Resultado
`type`	`type="a"`	a, b, c (`A`, `i`, `I` e `1` também funcionam)
`start`	`start="5"`	Começa a contar em 5
`reversed`	`reversed`	Conta de trás para frente
`value` (no `<li>`)	`<li value="10">`	Este item é o 10, os próximos continuam a partir daí

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type faz sentido no HTML porque as letras podem ter significado ("escolha a opção B"). Para mudanças só visuais, o CSS list-style-type: upper-alpha ou lower-roman faz o mesmo.

Listas aninhadas

Uma sublista vai dentro do <li> a que pertence, depois do texto desse item. Os navegadores mudam o marcador a cada nível: disco, depois círculo, depois quadrado.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

Repare onde fica o </li>: o item "Frontend" só fecha depois da sua sublista. Fechá-lo antes do <ul> coloca a sublista direto dentro do <ul> externo, o que é inválido mesmo parecendo quase igual.

Listas ordenadas se aninham do mesmo jeito, e a numeração recomeça em 1 em cada sublista. Para números como 1.1 e 1.2, são necessários contadores CSS.

Listas de descrição: dl, dt e dd

Uma lista de descrição forma pares de termos e descrições: um glossário, os detalhes de um pedido, pares no estilo de perguntas frequentes. <dt> é o termo e <dd> a descrição:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

Um termo pode ter vários <dd>, e vários <dt> podem compartilhar um <dd>. Os navegadores recuam o <dd> por padrão; a regra margin acima remove esse recuo. Para dados com várias colunas, uma tabela é mais adequada.

Listas sem marcadores: menus e listas horizontais

Menus de navegação são listas de links. Remova os marcadores com list-style: none e o recuo com padding: 0, e depois coloque os itens em linha com flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

Para os leitores de tela, a lista continua sendo uma lista ("navegação, lista, 3 itens"). Uma exceção: o Safari com VoiceOver pode deixar de tratá-la como lista quando os marcadores são removidos. Se a contagem importa para os seus usuários, adicione role="list" ao <ul>.

Espaçamento padrão

Os navegadores dão às listas uma margem superior e inferior de 1em e as recuam com padding-inline-start: 40px, que é onde ficam os marcadores. O padding fica no lado inicial, então em idiomas da direita para a esquerda os marcadores e o recuo passam para o outro lado automaticamente. Remova o padding e os marcadores vão para fora da caixa da lista, onde podem ser cortados; mantenha algum padding ou use list-style-position: inside.

Erros comuns

<li> sem uma lista pai. Ele precisa estar dentro de <ul>, <ol> ou <menu>.
Uma lista aninhada fora do seu <li>. Coloque a sublista dentro do item a que ela pertence.
Texto ou outras tags direto dentro de <ul>, como <ul><p>Note</p><li>...</li></ul>. Leve para dentro de um <li> ou para fora da lista.
Digitar marcadores ou números à mão com • e <br>. Os leitores de tela ouvem um parágrafo, não uma lista.
list-style: none sem padding: 0, deixando um misterioso recuo de 40 pixels.
Usar <ol> pela aparência. Se a ordem não importa, use <ul> e estilize.

Perguntas frequentes

Como fazer uma lista com marcadores no HTML?

Use uma lista não ordenada: <ul> com um <li> para cada item, por exemplo <ul><li>Milk</li><li>Eggs</li></ul>. O navegador desenha um marcador antes de cada item e recua a lista.

Qual a diferença entre ul e ol?

<ul> é uma lista não ordenada, mostrada com marcadores, para itens cuja ordem não importa. <ol> é uma lista ordenada, mostrada com números, para passos e rankings em que a ordem importa. As duas contêm itens <li>.

Como tirar os marcadores de uma lista no HTML?

Defina list-style: none no <ul> pelo CSS. Defina também padding-inline-start: 0 (ou padding: 0) para remover o recuo que o navegador adiciona para os marcadores.

Como começar uma lista ordenada em outro número?

Use o atributo start: <ol start="5"> numera o primeiro item como 5. reversed conta de trás para frente, e value num <li> define o número desse item e dos seguintes.

Como fazer uma lista dentro de outra no HTML?

Coloque o <ul> ou <ol> interno dentro de um <li> da lista externa, depois do texto desse item. Uma lista colocada direto dentro de outro <ul>, entre elementos <li>, é inválida.

Conceitos relacionados